列表渲染 之 v-for遍历数组和对象(利用key属性实现高效更
2020-07-08 本文已影响0人
瑟闻风倾
(1) 遍历数组和对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="../first/vue1026.js"></script>
</head>
<body>
<div id="app">
<span>列表</span>
<ul>
<li>{{list[0]}}</li>
<li>{{list[1]}}</li>
<li>{{list[2]}}</li>
<li>{{list[3]}}</li>
</ul>
<span>遍历数组</span>
<!-- 在遍历过程中,不使用索引值 -->
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
<!-- 在Vue2.0中数组的索引和值的顺序为v-for="(值,索引) in array"，而在Vue1.0中顺序相反。 -->
<ul>
<li v-for="(item,index) in list" :key="index">{{index}}-{{item}}</li>
</ul>
<span>遍历对象</span>
<!-- 1. 若只获取一个值：那么获取的是value -->
<ul>
<li v-for="item in user">{{item}}</li>
</ul>
<!-- 2. 获取value和key: 在Vue2.0中是v-for="(value,key) in object",而在Vue1.0中顺序相反。 -->
<ul>
<li v-for="(item,key) in user">{{key}}：{{item}}</li>
</ul>
<!-- 2. 获取value、key和index: 在Vue2.0中是v-for="(value,key,index) in object",而在Vue1.0中顺序相反。 -->
<ul>
<li v-for="(item,key,index) in user">{{index}}：{{key}}：{{item}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
list:["火龙果","龙眼","猕猴桃","樱桃"],
user:{
name:"liy",
phone:"123456"
}
}
});
</script>
</html>
(2) key属性的作用
- 说明：在列表中间节点插入新的数据节点时，即若希望在B和C之间加入一个F，Diff算法（Vue的虚拟DOM的different算法）会将之前的C更新为F、D更新为C、E更新为D、然后再更新E，效率很低。
中间插入.png
- key的作用：使用key来给每一个节点添加一个唯一标识，此时Diff算法就可以正确地识别此节点 并 找到正确的位置插入新的节点，从而高效地更新虚拟DOM，提升性能。
- 注意：我们在使用v-for时，建议为对应的元素或组件添加一个key属性；但是key需要具有唯一性，可使用item作为key，使用index作为key值其实无意义(并不能提升更新效率)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="../first/vue1026.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in list" :key="item">{{item}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
list:["火龙果","龙眼","猕猴桃","樱桃"]
}
});
</script>
</html>
