v-for循环中key属性的使用
1.使用push，没有绑定key值
1.1代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/vue.min.js" ></script>
</head>
<body>
<div id="app">
<div>
<label>Id:
<input type="text" v-model="id" />
</label>
<label>Name:
<input type="text" v-model="name" />
</label>
<input type="button" value="添加" @click="add"/>
</div>
<!--v-for循环的时候key属性只能使用number或者string-->
<!--key在使用的时候必须使用v-bind属性绑定的形式，指定key的值-->
<!--在组件中,使用v-for循环的啥时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一
字符串/数字类型：key值-->
<p v-for="item in list" >
<input type="checkbox"/>
{{item.name}}</p>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
id:'',
name:'',
list:[
{id:1,name:'张三'},
{id:2,name:'李四'},
{id:3,name:'王五'},
{id:4,name:'赵六'}
]
},
methods:{
add:function(){
this.list.push({id:this.id,name:this.name})
}
}
})
</script>
</body>
</html>
1.2效果
添加前：
添加后：
在目前看来没有任何问题
2.使用unshift时
2.1代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/vue.min.js" ></script>
</head>
<body>
<div id="app">
<div>
<label>Id:
<input type="text" v-model="id" />
</label>
<label>Name:
<input type="text" v-model="name" />
</label>
<input type="button" value="添加" @click="add"/>
</div>
<!--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.name}}</p>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
id:'',
name:'',
list:[
{id:1,name:'张三'},
{id:2,name:'李四'},
{id:3,name:'王五'},
{id:4,name:'赵六'}
]
},
methods:{
add:function(){
this.list.unshift({id:this.id,name:this.name})
}
}
})
</script>
</body>
</html>
2.2效果
在p标签没用用v-bind绑定key值
把:key="item.id"注释掉看
添加前：
添加后
很明显在未点击之前选择的是王五，点击后却是李四
在p标签加上:key=“item.id”，点击后效果（点击前效果一样）
3.总结
1.v-for循环的时候key属性只能使用number或者string
2.key在使用的时候必须使用v-bind属性绑定的形式，指定key的值
3.在组件中,使用v-for循环的啥时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一字符串/数字类型：key值
原创文章 73
获赞 64
访问量 2738