听我说

从 条件渲染 那一篇，我学习到了如何用Vue对dom节点根据条件显示

但单单有条件还不够啊，有时候数据是一大坨一大坨的数据，如果Vue不提供咱要么使用“v-html” 要么就没办法实现

v-html又感觉太low了，Vue提供了另外的指令更好的实现，那便是：列表渲染

列表渲染：v-for

简单的列表渲染可以使用v-for来完成，而Vue提供了两种采用形式的列表渲染

列表渲染之数组

假设我有一个数组，然后我希望数组里面的数据，通过展示在ul的一个一个li里面，并且要求数组更新的同时li会自动的增减

假设data如下

//假设下面是Vue的配置对象

{

  data:{

    msgList:[

      {

        name:"张三",

        age:19,

        sex:"男"

      },

      {

        name:"李四",

        age:22,

        sex:"男"

      },

      {

        name:"王五",

        age:20,

        sex:"女"

      },

      {

        name:"陈真",

        age:30,

        sex:"男"

      },

    ]

  }

}

那么dom节点可以这么写，达到渲染的效果

<!--假设这是根节点的内容-->

<ul>

  <li v-for="item of msgList">

    {{item.name}} - {{item.age}} - {{item.sex}}

  </li>

</ul>

此时，ul里面的li渲染出的个数等同于msgList的个数，同时item表示当前li的数组元素

可以用JavaScript的for-of循环来理解，这里用v-for="item in msgList"也是一样的效果

item都是表示msgList的成员

完整代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="./vue.js"></script>

    <title>Document</title>

</head>

<body>

    <div id="root">

        <ul>

            <li v-for="item of msgList">

              {{item.name}} - {{item.age}} - {{item.sex}}

            </li>

        </ul>

    </div>

</body>

<script>

    let vm = new Vue({

        el:"#root",

        data:{

            msgList:[{

                name:"张三",

                age:19,

                sex:"男"

            },

            {

                name:"李四",

                age:22,

                sex:"男"

            },

            {

                name:"王五",

                age:20,

                sex:"女"

            },

            {

                name:"陈真",

                age:30,

                sex:"男"

            }]

        }

    })

</script>

</html>

列表渲染之对象

Vue还允许配置为对象这种可遍历的变量来使用v-for

如果配置为对象的话，那么会拿到两个参数，一个是key一个是value（先拿到value在拿到key）

具体代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="./vue.js"></script>

    <title>Document</title>

</head>

<body>

    <div id="root">

        <ul>

            <li v-for="(value,key) of msgObj">

              {{key}} - {{value}}

            </li>

        </ul>

    </div>

</body>

<script>

    let vm = new Vue({

        el:"#root",

        data:{

            msgObj:{

                name:"陈真",

                age:30,

                sex:"男"

            }

        }

    })

</script>

</html>

当然也可以写一个参数，只接受value

<div id="root">

    <ul>

        <li v-for="value of msgObj">

          {{value}}

        </li>

    </ul>

</div>

完全写法

无论是对象还是数组，列表渲染都会给当前值索引，所以对于数组的话就可以写成两个参数，显示value后是索引

<ul>

    <li v-for="(item,index) of msgList">

      {{index}}、{{item.name}} - {{item.age}} - {{item.sex}}

    </li>

</ul>

如何使对象的话就这么写

<ul>

    <li v-for="(value,key,index) of msgObj">

      {{index}}、{{key}} = {{value}}

    </li>

</ul>

key的应用&渲染原理浅析

为了不避免出错，无论是react还是vue使用v-for，原则上都应该配置唯一标识作为key

当出现要对数据修改时，未配置唯一标识key可能会出现bug

因此对于需要用上v-for的节点请配置上数据唯一标识作为key

详细解释请参照：维护状态

浅析出错原因

Vue在监控到数据改变时，并不会如我们所想的一样马上渲染dom

而是会先渲染虚拟dom，然后通过特定算法或者说特定规则去渲染实际dom

渲染规则如下：

  • 当遇到v-for时，首先寻找数据老的虚拟dom和新的虚拟dom的唯一标识进行对比（以li为例）
  • 在li节点中，如果有一样的部分那么照搬老的dom，不重新渲染，直接搬运反之根据新的虚拟dom重新渲染
  • 如果li中这个节点在旧虚拟dom不存在，那么久会按照新的虚拟dom重新渲染

不放图片说不清楚，放图片说一大堆，搬出尚硅谷的视频吧：零基础入门Vue之key的作用和原理

key的具体用法

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

对于 Vue中的key 的用法也很简单，他是为了标识v-for每个循环元素的唯一性，所以key也应该是唯一的

写法如下

<dom v-for="item in list" :key="item.id"></dom>

此时，当前dom与数据唯一的id互相绑定，这样如果dom更新了，新旧虚拟dom就能一一对应的去对比

就不会出现元素紊乱，并且渲染效率低下的问题

具体代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="./vue.js"></script>

    <title>Document</title>

</head>

<body>

    <div id="root">

        <ul>

            <li v-for="item of msgList" :key="item.id">

              {{item.name}} - {{item.age}} - {{item.sex}}

            </li>

        </ul>

    </div>

</body>

<script>

    let vm = new Vue({

        el:"#root",

        data:{

            msgList:[{

                id:1,

                name:"张三",

                age:19,

                sex:"男"

            },

            {

                id:2,

                name:"李四",

                age:22,

                sex:"男"

            },

            {

                id:3,

                name:"王五",

                age:20,

                sex:"女"

            },

            {

                id:4,

                name:"陈真",

                age:30,

                sex:"男"

            }]

        }

    })

</script>

</html>

注：切忌把索引作为key，因为只要不是往末尾插入数据或者删除数据的方式来修改数据，都会造成index失去唯一标识的作用

The End

本片完~

零基础入门Vue之影分身之术——列表渲染&渲染原理浅析的更多相关文章

  1. 零基础入门学习Python（12）--列表：一个打了激素的数组(3)

    前言 这节课我们继续谈一下Python列表一些知识 知识点 Python常用操作符 比较操作符 >>> list1 = [123] >>> list2 = [234 ...

  2. 零基础入门学习Python（11）--列表：一个打了激素的数组(2)

    前言 上节课我们介绍一个打了激素的数组,叫做列表.列表我们比作一个大仓库,你所能够具现化的东西,都可以往里面扔,它包罗万象.另外还介绍了三个往列表添加元素的方法,分别是: append(),exten ...

  3. 零基础入门学习Python（10）--列表：一个打了激素的数组

    前言 有时候我们需要把一些东西暂时保存起来,因为他们有着一些直接或间接的联系,我们需要把它们放在某个组或者集合中,未来可能用得上. 很多接触过编程的朋友都知道,都接触过数组这个概念,那么数组这个概念事 ...

  4. 零基础入门 实战mpvue2.0多端小程序框架

    第1章 课程快速预览(必看!!!)在这一章节中,老师讲带领你快速预览课程整体.其中,涉及到为什么要做这么一门实战课程.制作一个小程序的完整流程是怎么样的,以及如何做项目的技术选型. 第2章 30 分钟 ...

  5. 零基础入门 Java 后端开发，有哪些值得看的视频?

    目前网络上充满了大量的 Java 视频教程,然而内容却鱼龙混杂,为了防止小伙伴们踩坑,一枫结合自己的学习经验,向大家推荐一些不错的学习资源. 作为一名非科班转码选手,可以说,我是在哔哩哔哩上的研究生! ...

  6. 从零基础入门JavaScript（1）

    从零基础入门JavaScript(1) 1.1  Javascript的简史 1995年的时候   由网景公司开发的,当时的名字叫livescript    为了推广自己的livescript,搭了j ...

  7. 函数:我的地盘听我的 - 零基础入门学习Python019

    函数:我的地盘听我的 让编程改变世界 Change the world by program 函数与过程 在小甲鱼另一个实践性超强的编程视频教学<零基础入门学习Delphi>中,我们谈到了 ...

  8. Cloudera Manager、CDH零基础入门、线路指导 http://www.aboutyun.com/thread-9219-1-1.html (出处: about云开发)

    Cloudera Manager.CDH零基础入门.线路指导http://www.aboutyun.com/thread-9219-1-1.html(出处: about云开发) 问题导读:1.什么是c ...

  9. 【JAVA零基础入门系列】Day2 Java集成开发环境IDEA

    开发环境搭建好之后,还需要一个集成开发环境也就是IDE来进行编程.这里推荐的IDE是IDEA,那个老掉牙的Eclipse还是先放一边吧,(手动滑稽). IDEA的下载地址:http://www.jet ...

  10. 【JAVA零基础入门系列】Day4 变量与常量

    这一篇主要讲解Java中的变量,什么是变量,变量的作用以及如何声明,使用变量. 那么什么是变量?对于初学者而言,可以将变量理解为盒子,这些盒子可以用来存放数据,不同类型的数据需要放在对应类型的盒子里. ...

随机推荐

  1. docker 原理之 user namespace（下）

    1. user namespace user namespace 主要隔离了安全相关的标识符和属性,包括用户 ID,用户组 ID,key 和 capabilities 等.同样一个用户 id 在不同 ...

  2. 每天学五分钟 Liunx 0100 | 服务篇：进程状态

    多任务和 CPU 时间片 前面说了 Liunx 是多用户多任务的,所谓的多任务就是多个进程"同时"执行.比如,同时开多个软件(进程),对于用户来说好像每个软件(进程)都在工作,但是 ...

  3. MyBatis_问题解决：Invalid bound statement (not found)

    Invalid bound statement (not found)问题,即在mybatis中dao接口与mapper配置文件在做映射绑定的时候出现问题,简单说,就是接口与xml要么是找不到,要么是 ...

  4. [转帖]聊聊TPS、QPS、CPS概念和区别

    https://cloud.tencent.com/developer/article/1859053 TPS 概念 TPS:是TransactionsPerSecond的缩写,也就是事务数/秒.它是 ...

  5. [转帖]故障分析 | 让top命令直接显示Java线程名？-- 解析OpenJDK的一个bug修复

    https://zhuanlan.zhihu.com/p/413136873 作者:阎虎青DBLE 开源项目负责人,负责分布式数据库中间件研发工作:持续专注于数据库方面的技术,始终在一线从事开发:对数 ...

  6. [转帖]【我和CloudQuery 的故事】安装部署CloudQuery 初体验—-前篇

    https://www.modb.pro/db/1694256553947910144 一.前言 在日常数据库运维中,为连接多种数据库,经常要安装不同的客户端,非常繁琐,且占用大量存储空间.如果能有一 ...

  7. [转帖]Kafka中Topic级别配置

    https://www.cnblogs.com/moonandstar08/p/6139502.html 一.Kafka中topic级别配置 1.Topic级别配置 配置topic级别参数时,相同(参 ...

  8. 使用Grafana + jmx 监控 kafka3.5 的过程

    使用Grafana + jmx 监控 kafka3.5 的过程 摘要 周五一边进行数据库监控, 同时想着部署一套监控系统. 能够监控一下kafka等中间件 结果不想自己遇到了很多坑. 下午有同事语音告 ...

  9. Python学习之十九_程序运行时间的验证

    Python学习之十九_程序运行时间的验证 背景 最近一段时间比较忙. 而且还遇到了一个lua脚本优化redis访问的场景. 想着自己还在学习python(时断时续) 所以想借着这个场景,学习一下py ...

  10. [转帖]LVS入门篇（三）之LVS的工作模式和调度算法

    LVS入门篇(三)之LVS的工作模式和调度算法 https://www.cnblogs.com/linuxk/p/9358512.html 1.NAT模型 (1)原理图: ①.客户端(200.10.1 ...