Vue的学习之路十:v-for中key的应用
<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
·
<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">
<!-- 注意:v-for循环的时候,key属性只能使用number获取string -->
<!-- key在使用的时候,必须使用v-bind属性绑定的形式,指定key的值 -->
<!-- 在组件中,使用v-for循环的时候,或者在一些特殊情况中,如果v-for有问题,必须在使用v-for的同时,指定唯一的字符串/数字 类型 :key 值 -->
<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
更多推荐
已为社区贡献9条内容
所有评论(0)