发现问题
v-for虽然能渲染页面，但是有一个问题，在没有绑定key的情况下更新数据时，有时候会出现一些渲染问题。
来自官网内容：它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
比较难以描述，也难以理解，这里使用黑马程序员教程中用到的例子来展示：
这里也放上源码和解释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./lib/vue.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="add" @click="add">
</div>
<p v-for="item in list" v-bind:key="item">
<input type="checkbox">
ID:{{item.id}}---{{item.name}}
</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
id:'',
name:'aaa',
list: [
{id: 1, name: 'a'},
{id: 2, name: 'b'},
{id: 3, name: 'c'},
{id: 4, name: 'd'},
{id: 5, name: 'e'}
]
},
methods: {
add(){
// alert("ok")
// this.list.push({id:this.id,name:this.name})
alert("click")
this.list.unshift({id:this.id,name:this.name})
}
}
})
</script>
</body>
</html>其中add()中的方法unshift会在list数组开头插入一条数据，而posh是在list结束。在一开始勾选数据后（推荐勾选除了头1尾5这两条数据以外的数据，这样比较能显示问题），再以unshift插入数据就会发现有问题。例如：我勾选了2号数据，在我unshift插入后会变为1号数据。推荐自己试试
原因也很简单，因为没有将数据绑定，checkbox，id，name虽然是通过循环渲染的，但是并没有关联。导致插入更新新数据时，位置出错。
解决问题
很方便的方法
<div v-for="item in items" v-bind:key="item.id"> <!-- 内容 --> </div>key只支持字符串和数字，并且建议尽可能在使用 v-for 时提供 key attribute。
这样每次循环所有属性将会以key为标识组成一组，不再会出现错位问题。
此处评论已关闭