008 vue的v-for的使用及key的使用

　　v-for 用于循环遍历

[A] 循环遍历数组/对象，不需要下标时

            <ul>

                <li v-for="item in movies">{{item}}</li>

            </ul>

 

[B] 循环遍历数组/对象，需要下标时

            若遍历的是数组，(item, index) item表示值，index表示下标

            若遍历的是对象，(item, key, index) item表示值，key表示键，index表示下标

            <ul>

                <li v-for="(item, index) in movies">{{index+1}} - {{item}}</li>

            </ul>

 

[C] 组件的key属性

            Vue官方推荐使用v-for时，给遍历的每个元素添加key属性，有key属性的元素在进行diff算法时，若没有发生变化会不被修改而直接使用

            这样，当插入新的元素时，新增的元素会新建，后面不变的元素会被直接使用而不会被按顺序修改。

            案例：

                如下面的通过事件添加v-for遍历的数组时，需要创建的组件增加了一个，但是由于之前创建的组件都有key属性，因此只需要将新增的

                这个组件创建，之前的组件可以直接拿来用，这样效率就提高了。