零基础入门Vue之影分身之术——列表渲染渲染原理浅析

听我说

从 条件渲染 那一篇,我学习到了如何用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重新渲染

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失去唯一标识的作用

文章转载自:StarVik

原文链接:https://www.cnblogs.com/Star-Vik/p/18008874

体验地址:引迈 - JNPF快速开发平台_低代码开发平台_零代码开发平台_流程设计器_表单引擎_工作流引擎_软件架构

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/670381.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vscode配置wsl ubuntu c++的环境

在ubuntu安装llvm/clang sudo apt install llvm clang clangd lldb vscode的调试器接口是按GDB开发的&#xff0c;所以需要一个适配器&#xff0c;lldb-mi就是这个适配器。lldb-mi原来是llvm项目的一部分&#xff0c;后面成为了一个单独的项目https://github.com/lldb-tools/…

【Docker】.NET Core 6.0 webapi 发布上传到Docker Desktop并启动运行访问,接口返回数据乱码解决方法

欢迎来到《小5讲堂》&#xff0c;大家好&#xff0c;我是全栈小5。 这是《Docker容器》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解&#xff0c; 特别是针对知识点的概念进行叙说&#xff0c;大部分文章将会对这些概念进行实际例子验证&#xff0c;以此达到加深对…

C语言——联合体类型

&#x1f4dd;前言&#xff1a; 在前面两篇文章&#xff1a;C语言——结构体类型&#xff08;一&#xff09;和C语言——结构体&#xff08;二&#xff09;中&#xff0c;我们讲述了C语言中重要的数据类型之一&#xff1a;结构体类型&#xff0c;今天我们来介绍一下C语言中的另…

C语言数组元素的引用

存储模式&#xff1a;一片连续的内存&#xff0c;按数据类型分割成若干相同大小的格子元素下标&#xff1a;数组开头位置的偏移量&#xff0c;a[0]引用第1个格子&#xff0c;a[1]引用第2个格子&#xff0c;以此类推 int a[5]; // 有效的下标范围是 0 ~ 4 a[0] 1; a[1] 2; a[2…

【机器学习】科学库使用手册第2篇:机器学习任务和工作流程(已分享,附代码)

本系列文章md笔记&#xff08;已分享&#xff09;主要讨论人工智能相关知识。主要内容包括&#xff0c;了解机器学习定义以及应用场景&#xff0c;掌握机器学习基础环境的安装和使用&#xff0c;掌握利用常用的科学计算库对数据进行展示、分析&#xff0c;学会使用jupyter note…

linux 自动定时清理缓存

文章目录 1&#xff0c;查看内存占用情况&#xff1a;1.1、free和available的区别&#xff1f;1.2、交换分区的作用&#xff1f; 2&#xff0c;手动清理命令3&#xff0c;定时自动清理3.1&#xff0c;创建文件夹3.2&#xff0c;新建文件cleanBuffer.sh3.3&#xff0c;添加内容3…

Transformer实战-系列教程2:Transformer算法解读2

&#x1f6a9;&#x1f6a9;&#x1f6a9;Transformer实战-系列教程总目录 有任何问题欢迎在下面留言 Transformer实战-系列教程1&#xff1a;Transformer算法解读1 Transformer实战-系列教程2&#xff1a;Transformer算法解读2 5、Multi-head机制 在4中我们的输入是X&#x…

【保姆级教程|YOLOv8改进】【5】精度与速度双提升,使用FasterNet替换主干网络

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…

01. k210-命令行环境搭建(ubuntu环境)

本文主要讲解k210在ubuntu23.04操作系统中的环境搭建 1.获取工具链 github下载工具链 截止到目前最新版本是:Kendryte GNU Toolchain v8.2.0-20190409[Pre-release]。 编译好的镜像有ubuntu版本和windows版本&#xff0c;本章我们主要讲解的是ubuntu系统的开发环境。 Versio…

重写Sylar基于协程的服务器(6、HOOK模块的设计)

重写Sylar基于协程的服务器&#xff08;6、HOOK模块的设计&#xff09; 重写Sylar基于协程的服务器系列&#xff1a; 重写Sylar基于协程的服务器&#xff08;0、搭建开发环境以及项目框架 || 下载编译简化版Sylar&#xff09; 重写Sylar基于协程的服务器&#xff08;1、日志模…

大数据Zookeeper--案例

文章目录 服务器动态上下线监听案例需求需求分析具体实现测试 Zookeeper分布式锁案例原生Zookeeper实现分布式锁Curator框架实现分布式锁 Zookeeper面试重点选举机制生产集群安装多少zk合适zk常用命令 服务器动态上下线监听案例 需求 某分布式系统中&#xff0c;主节点可以有…

CentOS 8 安装配置 Hadoop3.3.6 伪分布式安装方式(适用于开发和调试)

1.配置服务器ssh免密登录&#xff0c;否则后面启动会报错&#xff1a;尝试通过SSH连接到主机出现认证错误的提示 配置服务器ssh免密登录&#xff1a; 1.生成SSH密钥对&#xff08;如果尚未生成&#xff09;&#xff1a; 执行下面的命令生成密钥对&#xff0c;一直回车即可 ssh…

为后端做准备

这里写目录标题 flask 文件上传与接收flask应答&#xff08;接收请求&#xff08;文件、数据&#xff09;flask请求&#xff08;上传文件&#xff09;传递参数和文件 argparse 不从命令行调用参数1、设置default值2、"从命令行传入的参数".split()3、[--input,内容] …

2024年华为OD机试真题-数组去重和排序-Python-OD统一考试(C卷)

题目描述: 给定一个乱序的数组,删除所有的重复元素,使得每个元素只出现一次,并且按照出现的次 数从高到低进行排序,相同出现次数按照第一次出现顺序进行先后排序。 输入描述: 一个数组 输出描述: 去重排序后的数组 补充说明: 数组大小不超过100 数组元素值大小不超过10…

代码随想录day18--二叉树的应用6

LeetCode530.二叉搜索树的最小绝对差值 题目描述&#xff1a; 给你一个二叉搜索树的根节点 root &#xff0c;返回 树中任意两不同节点值之间的最小差值 。 差值是一个正数&#xff0c;其数值等于两值之差的绝对值。 示例 1&#xff1a; 输入&#xff1a;root [4,2,6,1,3] …

CSDN2024年我的创作纪念日1024天|不忘初心|努力上进|积极向前

CSDN2024年我的创作纪念日1024天| 学习成长机遇&#xff1a;学习成长收获&#xff1a;2023年度总结数据&#xff1a;2024新领域的探索&#xff1a;日常和自己的感慨&#xff1a;2024憧憬和规划&#xff1a;创作纪念日总结&#xff1a; 学习成长机遇&#xff1a; 大家好&#x…

SpringBoot-基础篇03

之前搭建了整个开发环境实现了登录注册&#xff0c;springBoot整合mybatis完成增删改查&#xff0c;今天完成分页查询&#xff0c;使用阿里云oss存储照片等资源&#xff0c;后期会尝试自己搭建分布式文件系统来实现。 一&#xff0c;SpringBootMybatis完成分页查询 1&#xff…

天线阵列车载应用——第1章 介绍 1.1节 汽车工业中的天线阵列:应用和频率范围

1.1 汽车工业中的天线阵列:应用和频率范围 无线通信系统的发展需要新的技术来支持更高质量的通信、新的服务和应用。近年来&#xff0c;汽车无线通信市场得到了极大的扩展。现代汽车使用不同的服务:AM/FM收音机、卫星广播(SDARS)、移动电话通信、数字音频广播(DAB)、远程无钥匙…

零基础学编程从入门到精通,系统化的编程视频教程上线,中文编程开发语言工具构件之缩放控制面板构件用法

一、前言 零基础学编程从入门到精通&#xff0c;系统化的编程视频教程上线&#xff0c;中文编程开发语言工具构件之缩放控制面板构件用法 编程入门视频教程链接 https://edu.csdn.net/course/detail/39036 编程工具及实例源码文件下载可以点击最下方官网卡片——软件下载—…

监控室脱岗检测系统-人员脱岗监测报警方案---豌豆云

人员脱岗检测算法自动识别比如保安值班室,监控室中的人员离岗行为,并自动告警给管理人员,约束了工作人员擅自离岗行为。 人员脱岗检测,对违规动作/危险行为/行为规范做精确识别,打造人员脱岗检测,将视频图像智能识别系统应用在企业日常运营管理中,降低生产成本。 应用场景&am…