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
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献9条内容
所有评论(0)