十三、Vue条件渲染v-for遍历数据

for循环，经常使用到的一种循环结构，那么vue中也是如此，v-for指令基于一个数组来渲染一个列表，其语法格式为item in imtes，其中items是源数据源数组，而item是被迭代的数组元素的别名。

v-for渲染一个基于数组的列表

<div id="app">
    <!--基本渲染-->
    <ul>
        <li v-for="item in items" :key="item.name">{{ item.name}}</li>
    </ul>
    <!--带索引的渲染，索引从0开始-->
    <ul>
        <li v-for="(item,index) in items">{{ index }} - {{ item.name }}</li>
    </ul>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            items:[
                {name:"PHP"},
                {name:"Vue"},
                {name:'JavaScript'}
            ]
        }
    });
</script>

v-for渲染一个基于对象的列表

<div id="app">
    <ul>
        <li v-for="v in object">{{ v }}</li>
    </ul>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            object:{
                title:'自如初',
                desc:'一个专注于技术的博客'
            }
        }
    });
</script>

v-for中key属性

在渲染基于数组的列表中，可以看到:key，那么它有什么作用？官方文档中是这样介绍的：

key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

key值得作用：增加唯一性,更高效的更新虚拟DOM，便于diff算法的更新，key值得唯一性更快的更新虚拟DOM。

diff算法对DOM进行原地复用，减少DOM性能耗费。

简单的来说，这个key就是为了保证这个值在这个数组中是唯一的。

2020-12-03