1. v-bind:key=" " 是vue2.x提出的,1.x的写法是track-by=" "
2、(1)vue1.x中v-for不能显示重复数据,要在v-for的元素内定义track-by="$index",即以序号为索引,如此当增加或者删除数据,view都会跟着改变。但是需要注意如此修改的数据并不能同步到页面,因为其index并没有改变。如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>track-by和key</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in list" track-by="$index">{{item}}</li>
</ul>
</div>
<script src="vue1026.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
list:['orange','pear','pear','lemon','peach'],
}
});
</script>
</body>
</html>
(2)vue2.x中v-for可以显示重复的数据 ,不需要指定track-by或者key。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>track-by和key</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script src="vue221.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
list:['orange','pear','pear','lemon','peach'],
}
});
</script>
</body>
</html>
3、建议尽量在使用v-for时提供key,除非遍历结果不需更新。
4、理想的track-by和key是遍历对象每项都有且唯一的id
4、下面是vue2.x的官方文档对key的说明,可以知道v-for渲染元素列表默认用“就地复用”策略。