使用v-for遍历显示数据的时候,如果会动态的添加数据,最好在使用v-for的时候设置一个key,这个key可以是num和string类型
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="util/vue-2.4.0.js"></script>
</head>
<body>
<div id="test">
name:<input type="text" v-model="name"/> <br/>
id: <input type="text" v-model="id"/>
<input type="button" value="button_append" @click="fun1"/>
<input type="button" value="button_insert" @click="fun2"/>
<!-- 在使用v-for的时候最好给每一项都设置一个唯一的key,这个key类型是 num或者string-->
<p v-for="user in list1" :key="user.id">
<input type="checkbox" />{{user.name}} <br/>
</p>
</div>
<script>
var vm1 = new Vue({
el:"#test",
data:{
list1:[
{"name":"a",id:0},
{"name":"b","id":1},
{"name":"c","id":2}
],
name:"",
id:""
},
methods:{
fun1: function () {
this.list1.push({"name":this.name,id:this.id});
// 在数组后面添加元素
},
fun2: function () {
this.list1.unshift({"name":this.name,id:this.id});
// 在数组前面添加元素
}
}
})
</script>
</body>
</html>
