v-for列表渲染

一、v-for迭代数组

<li v-for="(e,index) in emp" :key="e.id">编号{{index+1}} 名字{{e.name}} 年龄{{e.age}}
</li>
  • e 是循环数组中的每个元素的别名
  • index 是当前循环的下表,从0开始
  • :key 的作用: 是为了给 Vue 一个提示, 以便它可以跟踪每个节点的唯一标识,它会 基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素==

运行效果如下:

二、v-for 迭代对象

<li v-for="(value,key,index) in user" :key="index">第{{index+1}} 个属性为:{{key}} ={{value}}
</li>

 value是属性值,key是属性名,index索引值(从0开始),运行效果如下:

 注意:循环的属性顺序在不同js引擎是不一定的,Object.keys()

三、v-if和v-for同时使用时(注意)

需求:  如果年龄大于6666不显示

不推荐v-if和v-for同时作用到同一元素上

作用在同一元素上:

  •      vue3: 会先执行v-if,再执行v-for
  •      vue2: 会先执行v-for,再执行v-if
  •      因为vue3和vue2执行的顺序不相同,不推荐v-if和v-for同时作用到同一元素上,使用在同一元素上会报如下错误:vue.global.js:1661 [Vue warn]: Property "e" was accessed during render but is not defined on instance. 

解决方式:分开使用,不作用同一元素上

eg:           

<ul><template v-for="e in emp" :key="e.id"><li v-if="e.age > 6666">{{e.name}} - {{e.age}}</li>         </template>
</ul>

   *在template元素上循环,循环出来html查看不到template,会自动移除它

完整代码例子:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-for</title>
</head>
<body><div id="app"><h3>v-for迭代数组</h3><!--<li v-for="(e,index) in emp" :key="e.id">e 是循环数组中的每个元素的别名index 是当前循环的下表,从0开始--><li v-for="(e,index) in emp" :key="e.id">编号{{index+1}} 名字{{e.name}} 年龄{{e.age}}</li><h3>v-for 迭代对象</h3><!--value是属性值,key是属性名,index索引值(从0开始)注意:循环的属性顺序在不同js引擎是不一定的,Object.keys()--><li v-for="(value,key,index) in user" :key="index">第{{index+1}} 个属性为:{{key}} ={{value}}</li><h3>v-if和v-for同时使用时(注意)</h3><!--不推荐v-if和v-for同时作用到同一元素上作用在同一元素上:vue3: 会先执行v-if,再执行v-forvue2: 会先执行v-for,再执行v-if因为vue3和vue2执行的顺序不相同,不推荐v-if和v-for同时作用到同一元素上解决方式:分开使用,不作用同一元素上需求:如果年龄大于6666不显示在template元素上循环,循环出来html查看不到template,会自动移除它--><ul><template v-for="e in emp" :key="e.id"><li v-if="e.age > 6666">{{e.name}} - {{e.age}}</li></template></ul></div><script src="./node_modules/vue/dist/vue.global.js"></script><script type="text/javascript">const {createApp} = Vue;const app=createApp({data(){return{emp:[ //数组{id:0,name:'测试1',age:'555'},{id:1,name:'测试2',age:'6666'},{id:2,name:'测试3',age:'7777'}],user:{ //对象account: 55555,password: 9988999}}}}).mount("#app");console.log("app",app);</script>
</body>
</html>

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

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

相关文章

vue部署,chunk文件有部分404,解决方案

排查方案&#xff1a; 1&#xff0c;检查项目配置&#xff0c;再vue.config.js里面配置 publicPath: "./",2&#xff0c;打包后检查报错文件是否存在打包目录 3&#xff0c;如果1,2都有 找到部署后404的文件&#xff0c;查看是否为空文件 style里面全注释也会打包文…

activiti 表达式

前言 略 UEL UEL是java EE6规范的一部分&#xff0c;UEL&#xff08;Unified Expression Language&#xff09;即统一表达式语言。 activiti 表达式 activiti支持两个UEL表达式&#xff1a;UEL-value和UEL-method。 为了快速上手&#xff0c;可参考SPEL进行编写。 参考 …

网络协议--动态选路协议

10.1 引言 在前面各章中&#xff0c;我们讨论了静态选路。在配置接口时&#xff0c;以默认方式生成路由表项&#xff08;对于直接连接的接口&#xff09;&#xff0c;并通过route命令增加表项&#xff08;通常从系统自引导程序文件&#xff09;&#xff0c;或是通过ICMP重定向…

清除excel中换行符方法

1、选择要删除或替换换行符的单元格。 2、按 Ctrl H 以打开“查找和替换”对话框。 3、在“查找内容”栏中输入Ctrl J 或 Ctrl Enter 这时会出现一个闪烁的小点。如下图所示&#xff0c;然后点击全部替换即可。

Linux环境下C++配置Json库

一、准备好压缩包 1、下载Jsoncpp https://sourceforge.net/projects/jsoncpp/files/ 2、下载scons https://sourceforge.net/projects/scons/files/scons/2.1.0/scons-2.1.0.tar.gz/download 二.配置 1.创建一个json文件夹&#xff0c;使用Xftp将压缩包导入文件夹 2.使用 …

memmove内存拷贝函数

目录 一、memmove内存拷贝函数 二、memmove与memcpy的区别 三、模拟实现memmove函数 一、memmove内存拷贝函数 1.头文件&#xff1a;string.h 2.函数原型&#xff1a;void *(void* destination , const void* source , size_t num) 3.函数功能&#xff1a;将源地址空间中的…

物联网_01_物理设备的网络接入

设备的网络接入及物理层使用到的传输协议 现在物理设备有两种接入方式,一种是直接接入另一种是网关接入 直接接入 给物理设备添加NB-IOT通信模组等设备使之具有直接接入网络的能力 网关接入 物理设备在本地组网后通过统一的网关接入到网络(ZigBee无线组网网关).网关是处在本地…

Flutter页面滑动回调处理解决方法

文章目录 TabBarViewTabBarView简介TabBarView详细介绍 TabBarView滑动时如何处理事务例子 PageControllerPageController介绍PageController 的详细介绍 TabBarView TabBarView简介 TabBarView 是 Flutter 中的一个用于显示选项卡视图的小部件。它通常与 TabBar 一起使用&am…

分布式事务 学习

分布式事务 关系型数据库事务&#xff08;本地事务&#xff09; 原子性&#xff1a;构成事务的所有操作&#xff0c;要么都执行完成&#xff0c;要么都不执行/一致性&#xff1a;在事务执行前后&#xff0c;数据库的一致性约束没有被破坏。隔离性&#xff1a;并发的两个事务的…

【Java小知识点】类加载器的区别

&#x1f384;欢迎来到边境矢梦的csdn博文&#x1f384; &#x1f384;本文主要梳理Java类加载器的区别&#x1f384; &#x1f308;我是边境矢梦&#xff0c;一个正在为秋招和算法竞赛做准备的学生&#x1f308; &#x1f386;喜欢的朋友可以关注一下&#x1faf0;&#x1faf…

【SpringCloud微服务项目实战-mall4cloud项目(5)】——mall4cloud-leaf

mall4cloud-leaf 基于美团leaf的生成id服务 分布式id介绍具体代码及使用项目中的生成id模式具体代码分布式id生成使用 分布式id介绍 分布式ID&#xff08;Distributed ID&#xff09;是在分布式计算环境中生成的唯一标识符或标识号。在分布式系统中&#xff0c;通常需要唯一标…

红帽认证 | RHCE考试包括哪些内容?

Red Hat Certified Engineer&#xff08;RHCE&#xff09;考试是一项面向企业级系统管理员的认证考试&#xff0c;是认证Linux系统管理员技能的一种方式。 RHCE证书是Linux管理员领域中最受欢迎和最受认可的证书之一。 那RHCE考试都有哪些内容呢&#xff0c;一起来看看吧&…

Node学习笔记之path模块

path 模块提供了 操作路径 的功能&#xff0c;我们将介绍如下几个较为常用的几个 API&#xff1a; API 说明 path.resolve 拼接规范的绝对路径常用 path.sep 获取操作系统的路径分隔符 path.parse 解析路径并返回对象 path.basename 获取路径的基础名称 path.dirname…

【深度学习】数据集最常见的问题及其解决方案

简介 如果您还没有听过&#xff0c;请告诉您一个事实&#xff0c;作为一名数据科学家&#xff0c;您应该始终站在一个角落跟你说&#xff1a;“你的结果与你的数据一样好。” 尝试通过提高模型能力来弥补糟糕的数据是许多人会犯的错误。这相当于你因为原来的汽车使用了劣质汽…

SL8541 android系统环境+编译

1.Ubuntu系统的安装 最好使用ubuntu18.0.4 2.工具环境包的安装 // 安装Android8.1源码编译环境 sudo apt-get install openjdk-8-jdk --------------ok sudo apt-get install libx11-dev:i386 libreadline6-dev:i386 libgl1-mesa-dev g-multilib --------------ok sudo…

vue vue3开发 vue2和vue3的选择

现在vue新建项目&#xff0c;官方给出的命令是 npm create vuelatest项目默认vue3&#xff0c;他是不支持IE11 如果想支持IE11用下面方法&#xff0c;项目vue2.7.7 npm create vuelegacy他们的打包工具默认vite&#xff0c;不是webpack。老手要注意生成的项目中的示例组件使…

JS——垃圾回收的原理

引言 JavaScript是一种高级的、解释型的编程语言&#xff0c;广泛应用于网页开发和移动应用开发中。在JavaScript中&#xff0c;内存管理是一个重要的话题&#xff0c;而垃圾回收就是内存管理的一部分。本文将介绍JavaScript垃圾回收的原理&#xff0c;并提供一些示例代码来帮助…

nrf52832 PWM配置

PWM使用时sdk_config.h文件中配置如下:#define PWM_ENABLED 1 sdk_config.h 文件中添加下列配置 // <e> NRFX_PWM_ENABLED - nrfx_pwm - PWM peripheral driver // #ifndef NRFX_PWM_ENABLED #define NRFX_PWM_ENABLED 0 #endif // <q> NRFX_PWM0_ENABLED - Enab…

力扣每日一题56:合并区间

题目描述&#xff1a; 以数组 intervals 表示若干个区间的集合&#xff0c;其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间&#xff0c;并返回 一个不重叠的区间数组&#xff0c;该数组需恰好覆盖输入中的所有区间 。 示例 1&#xff1a; 输入&#…

USGS MODIS 蒸散量数据集

USGS MODIS 蒸散量 这里提供的蒸散量 (ET) 数据集是遥感技术的结果&#xff0c;主要利用 MODIS 热图像和全球天气数据集。该数据集对应于 Climate Engine 使用的全球 ET 产品的第 5 版。它为 2003 年至 2023 年期间的 ET 时空动态提供了宝贵的见解。该数据集的基石是可操作的简…