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属性,因此只需要将新增的

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

  • 相关阅读:
    Git命令与使用
    Android与WebView的JS交互
    Android 中关于硬件加速的使用和问题
    Activity-生命周期和启动模式
    Activity-恢复与保存状态或数据
    Android中Paint的一些使用心得记录
    Java中sleep,wait的区别
    C#基本类型
    LeetCode74 搜索二维矩阵
    leetcode 43 字符串相乘 java
  • 原文地址:https://www.cnblogs.com/carreyBlog/p/14062051.html
Copyright © 2011-2022 走看看