【03】Vue基础：v-for的使用

v-for的基本用法

v-for 用于实现列表渲染，可以使用item in items或item of items的语法
模板写法：

<li v-for="item in items">{{ item }}</li>
或：
<li v-for="item of items">{{ item }}</li>

js写法：

var vm = new Vue({
    el: '#app',
    data() {
        return {
            items: [1, 2, 3, 4, 5]
        }
    }
})

在浏览器运行此文件，可以看到成功显示出如下数据：

1
2
3
4
5

v-for 渲染对象的键值对

键值对是元素的索引值，也就是本例中的对象在数组中所占的下标。
模板写法：

<li v-for="(item, index) in items">{{ item }} --- {{index}}</li>
或：
<li v-for="(item, item) of items">{{ item }} --- {{index}}</li>

其实就是多了一个index。在浏览器运行此文件，可以看到成功显示出如下数据：

1 --- 0
2 --- 1
3 --- 2
4 --- 3
5 --- 4

key的说明

1.就地复用策略：当在进行列表渲染时，Vue会直接对已有的标签进行复用，不会将所有的标签重新删除和创建，只会创建新的元素然后把新的数据渲染进去。
2.key属性可以用来提升v-for渲染的效率，Vue不会去改变原有的元素和数据，而是创建新的元素然后把新的数据渲染进去。
3.key属性必须是唯一的标识，很多人使用index，不过建议使用数据的id可能会更好。
4.是否使用key都不会影响功能的实现，但是在vue2.2.0+版本中，如果不实用key，将会出现警告。

key的使用

模板写法：

<li v-for="(item, index) in items" :key="index">{{ item }} --- {{index}}</li>
或：
<li v-for="(item, item) of items" :key="index">{{ item }} --- {{index}}</li>

在浏览器运行此文件，可以看到成功显示出如下数据：

1 --- 0
2 --- 1
3 --- 2
4 --- 3
5 --- 4