【vue.js】文档解读【day 3】 | 列表渲染

在这里插入图片描述

如果阅读有疑问的话,欢迎评论或私信!!

文章目录

  • 列表渲染
    • v-for
    • v-for 与对象
    • 在 `v-for` 里使用范围值
    • `template` 上的 `v-for`
    • v-for与v-if
    • 通过key管理状态
    • 组件上使用v-for
    • 数组变化侦测

列表渲染

v-for

在我们想要渲染出一个数组中的元素时,在JavaScript中,我们可能会想到循环使用document.createElement创建标签,并且赋予变量值。

而vue中提供给了我们v-for指令,可以更方便快捷的渲染一个列表标签。v-for中的值需要使用item in items的语法,其中item是别名,也就是自命名的变量,用于在当前作用域中使用。而items是一个数组名。例如:

<template><p v-for="myCustom in myArr" class="active">{{ myCustom }}</p>
</template><script>
export default {data() {var myArr  = [1,2,3,4,5,6,7,8,9,10]return {myArr};}
};
</script>

该代码渲染除了10个p标签,并且同时class等属性也会保存。

除此之外,我们可以使用v-for指令的第二个可选参数来使用数组中的索引值。例如:

<template><p v-for="(myCustom,index) in myArr" class="active">{{ myCustom  }} - {{  	   index }}</p>
</template><script>
export default {data() {var myArr  = [1,2,3,4,5,6,7,8,9,10]return {myArr};}
};
</script>

在官方文档中有一句话:在 v-for 块中可以完整地访问父作用域内的属性和变量。也就是我们可以访问myArr的同胞属性,emm…这个应该本来是可以的吧,只要是这个实例中data返回的对象,都可以被插入到DOM中。这句话也可能是为了给下文嵌套v-for讲的。

在多层嵌套的v-for中,作用域的方式和多层嵌套for循环的方式比较像,父作用域无法访问子作用域,而子作用域可以方法父作用域。例如:

<li v-for="item in items"><span v-for="childItem in item.children">{{ item.message }} {{ childItem }}</span>
</li>

在vue文档中,提到可以使用of分隔符替代in,这个用法的意图可能是为了根据用户不同风格提供的,在JavaScript中,for-of用来遍历一个对象,来表示每个对象值,而for-in会返回索引值。具体怎么使用都可以,自己怎么喜欢怎么来。例如:

<div v-for="myCustom of myArr"></div>

v-for 与对象

v-for指令对数组和对象的使用方法类似,只是对于对象,第二个参数为对象的第三个参数才是目前迭代的位置索引。关于v-for对对象键的遍历,来源于ES6中Object原型上的keys方法所得到的数组。

例如:

<template><p v-for="(myCustom,currentKey,currentIndex) in author" class="active">{{ myCustom  }} - {{  currentKey }} -  {{ currentIndex }}</p>
</template><script>
export default {data() {var author = {name: "John Doe",books: ["Vue 2 - Advanced Guide","Vue 3 - Basic Guide","Vue 4 - The Mystery",],};return {author};}
};
</script>

输出效果:

John Doe - name - 0

[ “Vue 2 - Advanced Guide”, “Vue 3 - Basic Guide”, “Vue 4 - The Mystery” ] - books - 1

v-for 里使用范围值

v-for 可以直接接受一个整数值。在这种用例中,会将该模板基于 1...n 的取值范围重复多次。

<span v-for="n in 10">{{ n }}</span>

注意此处 n 的初值是从 1 开始而非 0

template 上的 v-for

与模板上的 v-if 类似,你也可以在 <template> 标签上使用 v-for 来渲染一个包含多个元素的块。例如:

<ul><template v-for="item in items"><li>{{ item.msg }}</li><li class="divider" role="presentation"></li></template>
</ul>

v-for与v-if

在vue风格指南中有一句话:Never use v-if on the same element as v-for.

不要将v-if和v-for使用在同一个元素上

vue解释了下面两种情况:

如果你想要先过滤一个列表,然后决定列表中该元素是否显示,可以这样做:

<template><ul v-for="currentValue in myArr"><li v-if="currentValue.isActive">{{ currentValue.myNumber }}</li></ul>
</template><script>
export default {data() {var myArr  = [{myNumber:1,isActive:true},{myNumber:2,isActive:false},{myNumber:3,isActive:true},{myNumber:2,isActive:false}]return {myArr};}
};
</script>

控制台输出:1 3

如果你想要先决定是否显示一个列表,然后再进行过滤,可以这样做:

<template><ul v-if="showList" ><li v-for="currentValue in myArr">{{ currentValue.myNumber }}</li></ul>
</template><script>
export default {data() {var showList = true;var myArr  = [{myNumber:1,isActive:true},{myNumber:2,isActive:false},{myNumber:3,isActive:true},{myNumber:2,isActive:false}]return {myArr,showList};}
};
</script>

控制台输出:1 2 3 4

通过key管理状态

我们知道vue是有自己的响应式系统,大部分数据都是有响应式的功能,那么v-for中的数据应该也有响应式功能。也就是在v-for中的数据发生改变时,渲染出的列表也应该直接更新。

对于v-for的更新策略,vue的默认策略是“就近更新”,也就是不变动DOM的渲染顺序,而是直接改变渲染值。

我们来看两组代码:

不带key

<template><div ><p v-for=" (item,index) in keyTest" >{{ item.myName }} -------- <input 			type="text"></p><button @click="add()">添加</button></div>
</template><script>
export default {data() {var keyTest = [{id: 0,myName: 1,},{id: 1,myName: 2,},{id: 2,myName: 3,},{id: 3,myName: 4,},{id: 4,myName: 5,},];return {keyTest};},methods: {add(){this.keyTest.unshift({id:10,myName:'新的'});}},
};
</script>

在这里插入图片描述

带key

<template><div ><p v-for=" (item,index) in keyTest" >{{ item.myName }} -------- <input 			type="text"></p><button @click="add()">添加</button></div>
</template><script>
export default {data() {var keyTest = [{id: 0,myName: 1,},{id: 1,myName: 2,},{id: 2,myName: 3,},{id: 3,myName: 4,},{id: 4,myName: 5,},];return {keyTest};},methods: {add(){this.keyTest.unshift({id:10,myName:'新的'});}},
};
</script>

在这里插入图片描述

由效果图可以看出,带key之后插入元素不影响input中的值,而不带key时,只是在后面插入一个新DOM,之后修改之前的数据。

组件上使用v-for

等学完组件知识之后更新,暂存…

数组变化侦测

Vue可以侦听响应式数组的变更方法,前提是该方法会使数组变化。例如:

  • push() 在数组末尾插入一个值,并返回修改后的数组长度
  • pop() 删除数组中最后一个值,并返回该值
  • shift()在数组第一个值之前插入一个值,并返回修改后的数组长度
  • unshift() 删除数组中第一个值,并返回该值
  • splice() 在数组中指定位置插入或删除元素
  • sort() 对数组进行排序,并返回数组
  • reverse() 颠倒数组中元素的位置

对数组操作时,有的方法会直接改变数组值,而有的方法会返回一个修改后的新数组(数组副本)。大部分过于方法只会返回一个新数组,我们可以将旧数组值使用新数组覆盖,并且vue实现了一些性能更高的DOM元素重用方法。

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

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

相关文章

C# 中 Math.Round 数学函数

在 C# 中&#xff0c;Math.Round 是一个数学函数&#xff0c;用于对一个浮点数进行四舍五入操作。它接受一个浮点数作为输入&#xff0c;并返回一个最接近输入值的整数或指定小数位数的浮点数。 Math.Round 方法有多个重载&#xff0c;其中最常用的重载有以下两种形式&#xf…

C语言数据结构之二叉堆

愿你千山暮雪 海棠依旧 不为岁月惊扰平添忧愁 &#x1f3a5;前期回顾-二叉树 &#x1f525;数据结构专栏 期待小伙伴们的支持与关注&#xff01;&#xff01;&#xff01; 目录 前期回顾 二叉堆的概念及结构 二叉堆的创建 顺序表的结构声明 顺序表的创建与销毁 二叉堆的插入 …

qtCreator可以全局包含。VSqt中千万不能全局包含,你的控件头文件会自己变成<>括号,编译就报错

qtCreator可以全局包含。 VSqt中千万不能全局包含&#xff0c;你的控件头文件会自己变成&#xff1c;&#xff1e;括号&#xff0c;编译就报错

【fastllm】学习框架,本地运行,速度还可以,可以成功运行chatglm2模型,估计chatglm3模型应该也可以运行,但是并没有现成的模型文件

1&#xff0c;关于 fastllm 项目 https://github.com/ztxz16/fastllm &#x1f680; 纯c实现&#xff0c;便于跨平台移植&#xff0c;可以在安卓上直接编译 &#x1f680; ARM平台支持NEON指令集加速&#xff0c;X86平台支持AVX指令集加速&#xff0c;NVIDIA平台支持CUDA加速…

pytest教程-15-多个fixture以及重命名

领取资料&#xff0c;咨询答疑&#xff0c;请➕wei: June__Go 上一小节我们学习了fixture的yield关键字&#xff0c;本小节我们讲解一下使用多个fixture的方法。 使用多个fixture 如果用例需要用到多个fixture的返回数据&#xff0c;fixture也可以return一个元组、list或字…

数据中台驱动:高效交付之道

如何保证数据中台高效交付&#xff1f; 在数据行业中&#xff0c;项目交付难题尤为突出&#xff0c;尤其在数据中台领域。数据中台项目交付面临诸多挑战&#xff0c;若不妥善解决&#xff0c;将会降低服务质量&#xff0c;影响企业数字化建设的顺利开展&#xff0c;甚至影响项目…

容器(0)-DOCKERFILE-安装-常用命令-部署-迁移备份-仓库

1.安装 启动 systemclt start docker //启动 systemctl status docker //状态 docker info systemclt stop docker systemctl status docker systemctl enable docker //开机启动 2.常用命令 镜像查看 docker images 镜像查看 docker status 镜像拉取 docker pull centos:…

Git 远程操作

1.分布式版本控制系统 我们目前所说的所有内容&#xff08;工作区&#xff0c;暂存区&#xff0c;版本库等等&#xff09;&#xff0c;都是在本地&#xff01;也就是在你的笔记本或者计算机上。而我们的 Git 其实是分布式版本控制系统&#xff01;什么意思呢 可以简单理解为&am…

Reset Verification IP

Reset Verification IP IP 参数及接口 IP 例化界面 相关函数 assert_reset //置位复位信号 < hierarchy_path>.assert_reset();deassert_reset //取消置位复位信号 < hierarchy_path>.deassert_reset();set_master_mode //设置 RST_VIP 模式为 Master < hi…

仿射变换下的点位纠偏

点位偏差一直是一个很头疼的问题&#xff0c;但是由于摄像头和实际环境的局限性&#xff0c;我们不得不面对这个问题。对此&#xff0c;使用判别的方式进行一个仿射变换&#xff0c;是一种非常有效的方式&#xff0c;下图中图1是基准图&#xff0c;图2是目标图&#xff0c;图3是…

【嵌入式高级C语言】11:C语言Makefile

文章目录 1 makefile的概述【只针对Linux有效】1.1 make1.2 makefile1.3 采用makefile的好处 2 Makefile的语法规则3 makefile变量3.1 自定义变量3.2 系统环境变量3.3 预定义变量 4 伪目标5 最终版本Makefile 1 makefile的概述【只针对Linux有效】 1.1 make make是个命令&…

CesiumJS开发中坐标系的相关知识

在Cesium中,坐标系主要涉及两个概念:地球固定坐标系(Earth-Fixed Frame)和参考椭球体坐标系(Reference Ellipsoid Frame)即平时我们用的坐标系: 地球固定坐标系(Earth-Fixed Frame): 地球固定坐标系是指以地球为基准的坐标系,其原点位于地球质心,坐标轴与地…

数据结构之八大排序

&#x1d649;&#x1d65e;&#x1d658;&#x1d65a;!!&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦ &#x1f44f;&#x1f3fb;‧✧̣̥̇:Solitary_walk ⸝⋆ ━━━┓ - 个性标签 - &#xff1a;来于“云”的“羽球人”。…

npm 操作报错记录1- uninstall 卸载失效

npm 操作报错记录1- uninstall 卸载失效 1、问题描述 安装了包 vue/cli-plugin-eslint4.5.0 vue/eslint-config-prettier9.0.0 但是没有使用 -d &#xff0c;所以想重新安装&#xff0c;就使用 uninstall 命令卸载&#xff0c;结果卸载了没反应&#xff0c;也没有报错&#xf…

【Python】成功解决AttributeError: ‘MyClass‘ object has no attribute ‘my_attribute‘

【Python】成功解决AttributeError: ‘MyClass’ object has no attribute ‘my_attribute’ &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门…

CRM术语速览:掌握这十个专业名词,成为CRM专家

无论您是销售人员还是采购经理&#xff0c;熟悉CRM管理系统专业术语都是一门必修课。擅于运用CRM专业术语帮助您理解CRM管理系统的功能、更好的开展业务。本文与您分享不得不知道的十大CRM专业术语&#xff0c;CRM常用术语合集。常见的CRM术语包括MQL、SQL、SDR、销售漏斗等等。…

【Docker】了解Docker Desktop桌面应用程序,TA是如何管理和运行Docker容器(3)

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

AI新工具 百分50%算力确达到了GPT-4水平;将音乐轨道中的人声、鼓声、贝斯等音源分离出来等

1: Pi 百分50%算力确达到了GPT-4水平 Pi 刚刚得到了巨大的升级&#xff01;它现在由最新的 LLMInflection-2.5 提供支持&#xff0c;它在所有基准测试中都与 GPT-4 并驾齐驱&#xff0c;并且使用不到一半的计算来训练。 地址&#xff1a;https://pi.ai/ 2: Moseca 能将音乐…

JAVA虚拟机、Dalvik虚拟机和ART虚拟机简要对比

1、什么是JVM&#xff1f; JVM本质上就是一个软件&#xff0c;是计算机硬件的一层软件抽象&#xff0c;在这之上才能够运行Java程序&#xff0c;JAVA在编译后会生成类似于汇编语言的JVM字节码&#xff0c;与C语言编译后产生的汇编语言不同的是&#xff0c;C编译成的汇编语言会…

【Web安全】htaccess攻击

.htaccess攻击 文章目录 .htaccess攻击1. .htaccess文件2. 常见用法2.1. 自定义出错界面2.2. 强制文件执行方式2.3. PCRE绕过正则匹配2.4. php_value修改php设定2.5. php_value文件包含2.6. 把htaccess当作php 1. .htaccess文件 .htaccess是Apache网络服务器一个配置文件&#…