第6讲:v-for使用
目录
1.循环遍历
2.v-for遍历整形变量(99乘法表)
3.v-for遍历普通数组
4.v-for遍历数组对象
1.循环遍历
<ul><li v-for=”item in list” v-bind:key=”item”>{{ item }}</li></ul>
1、 key的作用主要是为了高效的更新虛拟DOM,通过key可以精准判断两个节点是否是同一个,从而避免频繁更新不同元素,使得整个patch过程更加高效,减少DOM操作量,提高性能。
2、 若不设置key可能在列表更新时引发一些隐蔽的bug。如某行数据不该更新的却更新了。
3、vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,否则vue只会替换其内部属性而不会触发过渡效果。
2.v-for遍历整形变量(99乘法表)
<h3 align="center">九九乘法表</h3>
<hr>
<table align="center" border="1"><tr v-for="i in 9" :key="i"><td v-for="j in i" :key="j">{{j}}*{{i}}={{i*j}}</td></tr>
</table>

3.v-for遍历普通数组
语法 : v-for="(item,index) in array"
item : 数组中的每一项
index : 索引值
如果只需要第一个参数item ,index可以不写,括号可以省略
<template><div><h2 align="center">for语句的使用方法讲解</h2><hr><h4 align="left"><pre>v-for指令基于一个数组渲染一个列表,它和JavaScript的遍历语法相似:v-for=”item in list”list是一个数组,item是当前被遍历的对象在数组进行遍历时,我们必须给遍历对象绑定一个对应的key值以保证对象的唯一性使用v-bind:key指令进行绑定</pre><ul><li v-for="item in weeks" :key='item'>{{item}}</li></ul></div>
</template>
<script>export default({name: 'ForDemo',data(){return {weeks:["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]}}
})
</script>

4.v-for遍历数组对象
语法 : v-for="(item,index) in array"
item : 数组中的每一项(每一个对象)
index : 索引值
如果只需要第一个参数item ,index可以不写,括号可以省略
<template><div><h2 align="center">for语句的使用方法讲解</h2><hr><h3 align="center">员工资料列表</h3><table align="center" width="800px" border="1"><thead><tr><th>员工ID</th><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tr v-for="row in empList" :key="row.empId"><td>{{row.empId}}</td><td>{{row.name}}</td><td>{{row.sex}}</td><td>{{row.age}}</td></tr></table></div>
</template>
<script>export default({name: 'For',data(){return {empList:[{empId:1,name:'张三',sex:'男',age:'18'},{empId:2,name:'李四',sex:'男',age:'28'},{empId:3,name:'丽丽',sex:'女',age:'38'},{empId:4,name:'晓晓',sex:'女',age:'16'},{empId:5,name:'张三丰',sex:'男',age:'48'}]}}
})
</script>

案例完整代码如下
<template><div><h2 align="center">for语句的使用方法讲解</h2><hr><h4 align="left"><pre>v-for指令基于一个数组渲染一个列表,它和JavaScript的遍历语法相似:v-for=”item in list”list是一个数组,item是当前被遍历的对象在数组进行遍历时,我们必须给遍历对象绑定一个对应的key值以保证对象的唯一性使用v-bind:key指令进行绑定</pre></h4><ul><li v-for="item in weeks" :key='item'>{{item}}</li></ul><h3 align="center">九九乘法表</h3><hr><table align="center" border="1"><tr v-for="i in 9" :key="i"><td v-for="j in i" :key="j">{{j}}*{{i}}={{i*j}}</td></tr></table><h3 align="center">员工资料列表</h3><table align="center" width="800px" border="1"><thead><tr><th>员工ID</th><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tr v-for="row in empList" :key="row.empId"><td>{{row.empId}}</td><td>{{row.name}}</td><td>{{row.sex}}</td><td>{{row.age}}</td></tr></table></div>
</template>
<script>export default({name: 'For',data(){return {weeks:["星期一","星期二","星期三","星期四","星期五","星期六","星期日"],empList:[{empId:1,name:'张三',sex:'男',age:'18'},{empId:2,name:'李四',sex:'男',age:'28'},{empId:3,name:'丽丽',sex:'女',age:'38'},{empId:4,name:'晓晓',sex:'女',age:'16'},{empId:5,name:'张三丰',sex:'男',age:'48'}]}}
})
</script>
本人从事软件项目开发20多年,2005年开始从事Java工程师系列课程的教学工作,录制50多门精品视频课程,包含java基础,jspweb开发,SSH,SSM,SpringBoot,SpringCloud,人工智能,在线支付等众多商业项目,每门课程都包含有项目实战,上课PPT,及完整的源代码下载,有兴趣的朋友可以看看我的在线课堂
讲师课堂链接:https://edu.csdn.net/lecturer/893
相关文章:
第6讲:v-for使用
目录 1.循环遍历 2.v-for遍历整形变量(99乘法表) 3.v-for遍历普通数组 4.v-for遍历数组对象 1.循环遍历 v-for指令基于一个数组渲染一个列表,它和JavaScript的遍历语法相似: v-for”item in list” list 是一个数组, i…...
ubuntu http 服务器响应
代码: h文件 #include <iostream> #include <curl/curl.h>#include <net/if.h> #include <sys/ioctl.h> #include <arpa/inet.h> #include <string.h>#include <event.h> #include <event2/http.h> #include <…...
C语言 结构体位域
在C语言中,结构体位域是一种特殊的结构体成员,它允许在结构体中定义一个二进制位字段,以便在单个字节中存储多个布尔值或枚举值。 结构体位域的定义方式如下: struct { unsigned int bit1: 1; // 定义一个名为bit1的位域&…...
ChatGPT AIGC 非常实用的AI工具集合大全
实战AI 工具箱 AIGC ChatGPT 职场案例60集, Power BI 商业智能 68集, 数据库Mysql8.0 54集 数据库Oracle21C 142集, Office, Python ,ETL Excel 2021 实操,函数,图表,大屏可视化 案例实战 http://t.csdn.cn/zBytu...
Visual Studio Cpp CLR C# 替换
1、首先将文件中所有都替换 你需要的名字 替换为整个解决方案 2、新建工程取名 Laserbeam_upper 3、把原工程下的cpp放进来,并改名Laserbeam_upper 4、在这里逐步添加 属性表配置opencv 5、cpp需要修改的两个地方 6、CLR新建和添加 选类库新建、然后直接粘贴进来…...
typeorm利用mongodb,save的时候更新会出现重复数据的问题。
是因为mongodb把new Object当成插入的数据了,修正方案 ObjectIdColumn({name: _id,})Transform((value) > new ObjectId(value.obj._id.toString()))// ts-ignore_id: ObjectId;Transform((value) > new ObjectId(value.obj._id.toString()))转换下就好了。...
决策树案例分析
决策树(Decision Tree)常用于研究类别归属和预测关系的模型,比如是否抽烟、是否喝酒、年龄、体重等4项个人特征可能会影响到‘是否患癌症’,上述4项个人特征称作‘特征’,也即自变量(影响因素X),‘是否患癌…...
Linux基本操作符(1)
W...Y的主页 😊 代码仓库分享 💕 目录 Linux的登录 Linux下基本指令 指令操作的理解 几个与用户操作符 ls 指令 pwd命令 cd 指令 touch指令 mkdir指令 rmdir指令 && rm 指令 什么叫操作系统,我相信如果是学计算机的都听说过&…...
pg数据表同步到hive表数据压缩总结
1、背景 pg库存放了大量的历史数据,pg的存储方式比较耗磁盘空间,pg的备份方式,通过pgdump导出后,进行gzip压缩,压缩比大概1/10,随着数据的积累磁盘空间告警。为了解决pg的压力,尝试采用hive数据…...
2023-Chrome插件推荐
Chrome插件推荐 一键管理扩展 链接 https://chromewebstore.google.com/detail/lboblnfejcmcaplhnbkkfcienhlhpnni 介绍 一键开启、禁用Chrome插件。 Checker Plus for Gmail™ 链接 https://jasonsavard.com/zh-CN/Checker-Plus-for-Gmail https://chromewebstore.goo…...
VUE使用DXFParser组件解析dxf文件生成图片
<template><div><input type"file" change"handleFileChange" /></div><el-table :data"tableData" style"width: 100%"><el-table-column prop"Control_No" label"序号" width…...
SpringBoot 集成 AKKA
文章目录 应用场景与 SpringBoot 集成示例 应用场景 AKKA 是一个用于构建高并发、分布式和容错应用程序的开源框架。它基于Actor模型,提供了强大的并发抽象和工具,适用于各种业务场景。以下是一些使用AKKA框架的常见业务场景的示例: 实时数据…...
什么是Service Worker?它在PWA中的作用是什么?
聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ Service Worker的作用是什么?⭐ 写在最后 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前…...
【算法深入浅出】字符串匹配之 KMP 算法
KMP 算法是一种字符串匹配算法。字符串匹配算法的目标是:在字符串 s 中找到与模式串 p 相等的子串,输出其位置。例如:s “abcdef”,p “cdef”,p 在 s 中的位置是 2(从 0 开始计数)。 容易想到…...
放弃webstrom转战vscode
本来是webstrom的忠实用户,无奈webstrom要么需要在网上找一个破解版或者不断的去找激活码,且破解版和激活码的文章总是很多,但是要找到真正有效的却总是要花费不少功夫。终于忍无可忍,转战vscode。(注:文中…...
VSCode 和 CLion
文章目录 一、VSCode1、文档2、插件3、智能编写4、VSCode 与 C(1)安装(2)调试(a)使用 CMake 进行跨平台编译与调试(b)launch.json(c)传参 (3&…...
Learn Prompt- Midjourney Prompt:Prompt 提示语
基础结构 一个基本的提示可以简单到一个单词、短语或表情符号。非常短的提示将在很大程度上依赖于 Midjourney 的默认样式。 完整 prompt:可以包括一个或多个图像链接、多个文本短语或单词,以及一个或多个后缀参数 Image Prompts: 可以将图像 URL 添加…...
uvm白皮书练习_ch2_ch223_加入objection机制
UVM中通过objection机制来控制验证平台的关闭。 在每个phase中,UVM会检查是否有objection被提起(raise_ objection),如果有,那么等待这个objection被撤销(drop_objection)后停止仿真;…...
利用C++开发一个迷你的英文单词录入和测试小程序-增强功能
小玩具基本完成之后,在日常工作中,记录一些单词,然后定时再复习下,还真的有那么一点点用(毕竟自己做的小玩具)。 在使用过程中,遇到不认识的单词,总去翻译软件翻译,然后…...
kibana启动报错
1.响应 超过时间30000ms (1) docker rm elasticsearch #从docker中删除es docker rm kibana #从docker中删除kibana (2)重新安装启动es加大最大运行内存 :1024M docker run --name elasticsearch -p 9200:9200 -p 9300:9300 \ -e "discovery.typesingle-node" \ -…...
脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)
一、数据处理与分析实战 (一)实时滤波与参数调整 基础滤波操作 60Hz 工频滤波:勾选界面右侧 “60Hz” 复选框,可有效抑制电网干扰(适用于北美地区,欧洲用户可调整为 50Hz)。 平滑处理&…...
逻辑回归:给不确定性划界的分类大师
想象你是一名医生。面对患者的检查报告(肿瘤大小、血液指标),你需要做出一个**决定性判断**:恶性还是良性?这种“非黑即白”的抉择,正是**逻辑回归(Logistic Regression)** 的战场&a…...
MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例
一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...
[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...
【C语言练习】080. 使用C语言实现简单的数据库操作
080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计,提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合:各模块职责清晰,便于独立开发…...
C# 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...
MySQL账号权限管理指南:安全创建账户与精细授权技巧
在MySQL数据库管理中,合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号? 最小权限原则…...
安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)
船舶制造装配管理现状:装配工作依赖人工经验,装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书,但在实际执行中,工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...
通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器
拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件: 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...
