vul中的指令（添加列表效果）
2018-09-14 本文已影响0人
greenPLUS
<body>
<div id="teay">
<input type="text" v-model="txt"><button v-on:click="alt">添加</button>//v-mode是用于双向数据绑定，用于表单元素
<ul>
<li v-for="val in arr">{{val}} <button v-on:click="delt(index)">删除</button></li>
</ul>
</div>
<script src="dist/vue.js"></script>
<script>
new Vue({
el:'#teay',
data:{
arr:["吃饭","睡觉","打豆豆"],
txt:''
},
methods:{
alt:function(){
this.arr.push(this.txt),//push（）添加
this.txt=''
},
delt:function(ind){
this.arr.splice(ind,1)//splice（ind，n）删除，从哪开始，删除几个
}
}
})
</script>
</body>
