<body>
<div id="app">
<label for="">Id:
<input type="text" v-model="id">
</label>
<label for="">Name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
<p v-for="item in list" :key="item.id">
<input type="checkbox">{{item.id}} --- {{item.name}}
</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
id: "",
name: "",
list: [
{id:1, name: "李斯"},
{id:2, name: "嬴政"},
{id:3, name: "赵高"},
{id:4, name: "韩非"},
]
},
methods: {
add(){
this.list.unshift({id: this.id, name: this.name})
}
}
})
</script>
</body>
key
在使用的时候,必须使用v-bind
属性绑定的形式,指定key
的值- 注意:
v-for
循环的时候,key
属性只能使用number
获取string
,不能是对象 - 推荐在使用
v-for
的时候,都用上 key