new Vue({
el:"#app",
// 数据
data:{
title:"列表",
lists:["列表1","列表2","列表3","列表4","列表5","列表6","列表7"],
sp:"输入",
val:"请输入数据",
},
// 函数
methods:{
add(){
// this指向new Vue
if(this.val){
this.lists.unshift(this.val);
this.val="";
}else{
this.lists.unshift("");
}
}
}
})
<div id="app">
<h1 v-html="title"></h1>
<span v-text="sp"></span>
<input type="text" v-model="val">
<button v-on:click="add">添加</button>
<ul>
<li v-for="list in lists">{{list}}</li>
</ul>
</div>
<!-- v-html 数据绑定 -->
<!-- v-text 同上 -->
<!-- v-on 绑定事件 :click 点击 ="函数"-->
<!-- v-for 循环 -->