听我说

从 条件渲染 那一篇，我学习到了如何用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. mybatisplus 查询结果排除某字段实现

    数据有Test表,表里有id,name,ip_address,last_time四个字段 通常查询写法,返回结果会把id,name,ip_address,last_time四个字段都返回 public ...

  2. 11、SpringBoot-mybatis-plus-druid多源数据事务

    系列导航 springBoot项目打jar包 1.springboot工程新建(单模块) 2.springboot创建多模块工程 3.springboot连接数据库 4.SpringBoot连接数据库 ...

  3. 【驱动】SPI驱动分析(六)-RK SPI驱动分析

    前言 Linux的spi接口驱动实现目录在kernel\drivers\spi下.这个目录和一些层次比较明显的驱动目录布局不同,全放在这个文件夹下,因此还是只好通过看Kconfig 和 Makefil ...

  4. java项目实践-jsp-filter-监听器-day19

    目录 1. jsp 2. 过滤器 3. listener 监听器 1. jsp servle逻辑处理方便 html页面表现麻烦 jsp 页面表现方便 但是逻辑处理麻烦 JSP 是一种页面技术 JSP本 ...

  5. 操作系统OS笔记2

    操作系统OS笔记2 调度和死锁 调度简介 1. 调度的基本概念 2. 调度原则 调度算法 平均周转时间: 平均带权周转时间:周转时间/服务时间 1. 先来先服务调度算法(FCFS) 当在高级调度中采用 ...

  6. Guava缓存工具类封装和使用

    本文为博主原创,未经允许不得转载: Guava是谷歌提供的一款强大的java工具库,里面包含了很多方便且高效的工具,在项目开发中有业务场景需要保存数据到内存当中, 且只需要保存固定时间就可以,该数据只 ...

  7. 3. Oracle数据库异常关闭，导致错误3. Oracle数据库异常关闭，导致错误ERROR: ORA-01034: ORACLE ngt available； ORA-27101: shared memory realm does not exist

    之前由于电脑没电,强制关机,导致Oracle数据库异常关闭,再次启动电脑登陆数据库时,发生以下错误: 当我尝试重新启动数据库时,发生错误: 经过查阅资料后得知:缺少INITXE.ORA文件,需要从下图 ...

  8. 缓存选型：Redis or MemCache

    ★ Redis24篇集合 1 背景 互联网产品为了保证高性能和高可用性,经常会使用缓存来进行架构设计.最常用的就是使用Redis了,也有部分企业会选择使用Memcache. 所以了解 Redis 和 ...

  9. 【KEIL 】Options for File

    使用" 项目 "窗口的上下文菜单打开此对话框 :菜单选项项目.该对话框包括带有三态替代项的复选框: -已选中且呈灰色 -属性是从父对象继承的.- 选中和白色 -为对象单独设置的属性 ...

  10. 使用JavaStream将List转为Map

    有的时候博客内容会有变动,首发博客是最新的,其他博客地址可能会未同步,认准https://blog.zysicyj.top 首发博客地址 系列文章地址 使用Java Stream将List转换为Map ...