zoukankan      html  css  js  c++  java
  • 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属性,因此只需要将新增的

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

  • 相关阅读:
    微软 软件的 一组堆成快捷键
    C#事件 的讲解
    软件缺陷分析的几种方法
    一个长三角人对深圳的看法 (转)
    一次LoadRunner的CPC考试经历
    测试是一门武功
    ORACLE的性能测试经验总结
    深圳测试协会第九次论坛在深圳举行
    10月28日参加了IBM的产品推介会
    什么是web安全性测试?
  • 原文地址:https://www.cnblogs.com/carreyBlog/p/14062051.html
Copyright © 2011-2022 走看看