Vue列表渲染

news2024/9/20 16:49:15

1,回顾HTML列表?

答:列表分为顺序列表ol,无序列表ul,用于在网页上以表格的形式进行数据展示,数据放在单元格之中,可以用于布局或者展示某个具体对象的信息。li表示列表的每一项。自定义列表为dl,dd为自定义的项目,区分项目的标准就是每一项前面的符号,比如圆形、方形等。如果存在多个项目,那么我们需要手动写多了li标签。

2,使用v-for自动生成li标签?

答:Vue指令v-for能够让Vue自动地帮我们生成li标签,也就是生成数据,并将项目类容展现到页面上。他的属性值是一个容器,容器里面存放条目数据。 通常结合li标签使用,(p,index)类似于容器解包,但是index会自动获取p的索引,p就是容器里面的一个元素。:key一般等于index。不要怀疑这种语法形式,只要不违背js语法,Vue会自动地去处理这些字符串的。

        v-for除了变量数组,还能遍历对象、字符串。对于对象,一般index自动获取对象里面的属性名称。对于字符串,index自动获得字符的索引。另外index也可以来自条目内容。

         此外,也可以指定遍历次数,下图中,会自动生成5个li。

 

3,key的原理??

答:key给每一个生成li标签进行编号 ,以便于模板管理与编译。每一个HTML元素都可以自定义key这个属性,但是如果在Vue模板里面使用key属性则会被Vue强制征用,实际DOM中并不会存在key属性。

        当v-for渲染列表时,他的索引从上往下是自增的,只要li的个数改变Vue都要自动刷新index。

        当一个页面使用Vue时,每当打开一个页面,会存在一个实际页面的实际DOM对象,还有一个仿品DOM对象(即Vue虚拟DOM对象),Vue每时每刻都在对比这两个DOM,每当虚拟DOM与实际DOM存在不同,Vue就会使用原生JS去修改实际DOM中需要修改的部分。

        由于Vue是数据管理者,每当模板发生变化,他又会自动生成一个局部虚拟DOM与现有的虚拟DOM进行对比,从而对比去改变虚拟DOM,虚拟DOM变化了又去修改实际DOM。

        而这个找不同的过程需要高效的处理,而字典是最快的,所以Vue使用key作为索引进行DOM比较,这个Key代表着DOM节点(元素节点的索引编号)。str.indexof('')返回0。arr.fliter(item,func)-->a new arr。

 

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

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

相关文章

C++多态详解(虚函数重写、接口继承、虚函数表详解)

目录 1. 多态概念 2. 多态的定义及实现 2.1 多态的构成条件 2.2 虚函数重写 2.3 C11 override和final 2.4 重载、覆盖(重写)、隐藏(重定义)的对比 3. 抽象类 3.1 概念 3.2 接口继承和实现继承 4. 多态的原理 4.1 虚函数表 4.2…

ESP32设备驱动-VCNL4010光传感器驱动

VCNL4010光传感器驱动 文章目录 VCNL4010光传感器驱动1、VCNL4010介绍2、硬件准备3、软件准备4、驱动实现1、VCNL4010介绍 VCNL4010 专为更短的距离而设计,不超过 200 毫米(约 7.5" ) 并且根据我们的实验,我们发现它在大约 10-150 毫米的距离内效果最佳。这对于检测手…

水表远程监控系统有什么功能吗?

水表远程监控系统是通过远程传输水表数据,实现对水表的远程监控和管理的一种智能化系统。它主要具备以下功能: 1.远程抄表功能:通过远程传输技术,实现对水表的远程抄表和监控,无需人工上门抄表,节省人力成本…

ChatGPT超详细教程-提问、使用、技巧~

huChatGPT已经面世很长时间了,很多人已经开始依赖ChatGPT了,逐渐应用到自己的生活工作学习中去了,然而还有很多人嚷嚷着不好用,真的不好用的话为什么广受好评,还有很多人一直在用? 当然也有可能真的对你没…

uni-app基础

1、基本语言和开发规范 uni-app代码编写,基本语言包括js、vue、css。以及ts、scss等css预编译器。 在app端,还支持原生渲染的nvue,以及可以编译为kotlin和swift的uts。 但是,DCloud提供了使用js编写服务器代码的uniCloud云引擎…

Unity Lighting Mode

在Light中Mode设置为Mixed时,Lighting Mode(在Window->Rendering->Light->Scene)有三种选项如下图: Baked Indirect 烘焙间接光,效果最好性能最耗 混合光源照亮的动态游戏对象将接收: 实时直接光照。烘焙间接…

【iOS_锁】

文章目录 前言锁线程安全锁🔒的作用锁的种类互斥锁 自旋锁加锁原理缺点对比自旋锁的缺点互斥锁的缺点 各种锁OSSpinLock使用OSSpinLockOSSpinLock存在缺陷 互斥锁分为两种: 递归锁、非递归锁 os_unfair_lock 【非递归互斥锁】锁的修饰使用 自旋锁的优先级…

数据结构初阶——堆排序

思维导图: 目录 一,堆排序的概念 二,堆排序的实现 2.1将数组变成堆 2.2堆有序化 二,全部代码 一,堆排序的概念 百度百科的解释如下:堆排序(英语:Heapsort)是指利用堆这种数据结构所设计…

Python——第7章 pandas数据分析实战

7.1pandas常用数据类型 7.1.1一维数组与常用操作 import pandas as pd import matplotlib.pyplot as plt#设置输出结果对齐方式 pd.set_option(display.unicode.ambiguous_as_wide,True) pd.set_option(display.unicode.east_asian_width,True)#自动创建从0开始的非负整数索引…

优化器| SGD/Adam/

前言:最近准备复习一下深度学习的基础知识,开个专栏记录自己的学习笔记 各种SGD和Adam优化器整理 基本概念 优化:最大化或最小化目标函数,具体指最小化代价函数或损失函数 损失函数 J(θ)f(hθ(x),y),h…

RK3568平台开发系列讲解(项目篇)TensorFlow图像分类

🚀返回专栏总目录 文章目录 一、安装tensorflow环境二、图像分类2.1、准备数据集2.2、构建和训练模型2.3、测试模型2.4、TensorFlow Lite模型2.5、模型转换和模拟测试三、部署推理测试沉淀、分享、成长,让自己和他人都能有所收获!😄 📢 TensorFlow 是一个基于数据流编程…

Python机器学习入门 - - 贝叶斯算法学习笔记

文章目录 前言一、贝叶斯算法简介二、贝叶斯算法的数学原理1. 条件概率2. 全概率公式3. 贝叶斯公式4. 朴素贝叶斯分类器5. 高斯朴素贝叶斯分类器和伯努利朴素贝叶斯分类器 三、Python实现朴素贝叶斯分类总结 前言 贝叶斯公式是我们高中就耳熟能详的统计概率定理,贝…

UnityVR--ResourceManager--资源管理

目录 简介 加载资源的几种方式 资源加载的管理器Resload.cs ResLoad类的应用举例 简介 这里记录一个资源管理工具集,提供一些方法将一些Object、Prefab直接从Assets文件夹中加载到场景中。 加载资源的几种方式 在项目中我们经常需要使用一些随时取用的东西&…

2023 华为 Datacom-HCIE 题库 06--含解析

多项选择 1.[试题编号:190185] (多选题)如图所示,PE 1和PE2之间通过Loopback0接口建立MP-BGP邻居关系,在配置完成之后,发现CE1和CE2之间无法互相学习路由,以下哪些项会导致该问题出现? A、PE1…

GDB调试工具

GDB(GNU Debugger)是一个功能强大的命令行调试工具,用于调试 C、C 程序以及其他编程语言的程序。它是 GNU 项目的一部分,可在多个操作系统上使用,包括 Linux、macOS 和 Windows(通过 MinGW 或 Cygwin&#…

针对KF状态估计的电力系统虚假数据注入攻击研究(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

如何用ChatGPT学Python

ChatGPT狂飙160天,世界已经不是之前的样子。 新建了人工智能中文站https://ai.weoknow.com 每天给大家更新可用的国内可用chatGPT资源 ChatGPT的能力大家肯定都听说过,很多学生应该都亲身体验过。它在自然语言处理方面的出色表现绝对颠覆了之前公众对人…

一文详解Java自定义注解

目录 简介 JDK注解 Target Retention Documented Inherited 第三方注解 自定义注解 举例 默认字符串注解 实现指定包名称扫描注解 简介 注解(Annotation)是Java SE 5.0 版本开始引入的概念,它是对 Java 源代码的说明,…

FreeRTOS中断配置和临界值

Cortx-M 中断 优先级分组 Cortex-M3允许具有较少中断源时使用较少的寄存器位指定中断源的优先级,因此STM32把指定中断优先级的寄存器位减少到4位。抢占优先级的级别高于响应优先级。而数值越小所代表的优先级就越高。高的抢占式优先级可以打断低的抢占式优先级&am…

mysql加强小结 203446

数据库三范式: 什么是范式 规则:想要设计一个好的关系,必须要满足一定的约束条件,有几个等级,一级比一级高 ​ 解决什么问题:让数据库设计更加简洁,结构更加清晰,否则容易造成数据冗余 数据库有哪些范式? ​ 数据库有七大范式,常用的只有三个范式 **第一范式:**业务上属…