当前位置: 首页 > news >正文

第6讲:v-for使用

目录

        1.循环遍历

        2.v-for遍历整形变量(99乘法表)

        3.v-for遍历普通数组

        4.v-for遍历数组对象

1.循环遍历

v-for指令基于一个数组渲染一个列表,它和JavaScript的遍历语法相似:
v-for=”item in list”
list 是一个数组, item 是当前被遍历的对象 
<ul>
    <li v-for=”item in list” v-bind:key=”item”>{{ item }}</li>
</ul>
在数组进行遍历时,我们必须给遍历对象绑定一个对应的 key 值以保证对象的唯一性
使用 v-bind:key 指令进行绑定
v-for 中key的作用
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遍历整形变量&#xff08;99乘法表&#xff09; 3.v-for遍历普通数组 4.v-for遍历数组对象 1.循环遍历 v-for指令基于一个数组渲染一个列表&#xff0c;它和JavaScript的遍历语法相似&#xff1a; v-for”item in list” list 是一个数组&#xff0c; i…...

ubuntu http 服务器响应

代码&#xff1a; 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语言中&#xff0c;结构体位域是一种特殊的结构体成员&#xff0c;它允许在结构体中定义一个二进制位字段&#xff0c;以便在单个字节中存储多个布尔值或枚举值。 结构体位域的定义方式如下&#xff1a; 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放进来&#xff0c;并改名Laserbeam_upper 4、在这里逐步添加 属性表配置opencv 5、cpp需要修改的两个地方 6、CLR新建和添加 选类库新建、然后直接粘贴进来…...

typeorm利用mongodb,save的时候更新会出现重复数据的问题。

是因为mongodb把new Object当成插入的数据了&#xff0c;修正方案 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)常用于研究类别归属和预测关系的模型&#xff0c;比如是否抽烟、是否喝酒、年龄、体重等4项个人特征可能会影响到‘是否患癌症’&#xff0c;上述4项个人特征称作‘特征’&#xff0c;也即自变量&#xff08;影响因素X&#xff09;&#xff0c;‘是否患癌…...

Linux基本操作符(1)

W...Y的主页 &#x1f60a; 代码仓库分享 &#x1f495; 目录 Linux的登录 Linux下基本指令 指令操作的理解 几个与用户操作符 ls 指令 pwd命令 cd 指令 touch指令 mkdir指令 rmdir指令 && rm 指令 什么叫操作系统&#xff0c;我相信如果是学计算机的都听说过&…...

pg数据表同步到hive表数据压缩总结

1、背景 pg库存放了大量的历史数据&#xff0c;pg的存储方式比较耗磁盘空间&#xff0c;pg的备份方式&#xff0c;通过pgdump导出后&#xff0c;进行gzip压缩&#xff0c;压缩比大概1/10&#xff0c;随着数据的积累磁盘空间告警。为了解决pg的压力&#xff0c;尝试采用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模型&#xff0c;提供了强大的并发抽象和工具&#xff0c;适用于各种业务场景。以下是一些使用AKKA框架的常见业务场景的示例&#xff1a; 实时数据…...

什么是Service Worker?它在PWA中的作用是什么?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ Service Worker的作用是什么&#xff1f;⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前…...

【算法深入浅出】字符串匹配之 KMP 算法

KMP 算法是一种字符串匹配算法。字符串匹配算法的目标是&#xff1a;在字符串 s 中找到与模式串 p 相等的子串&#xff0c;输出其位置。例如&#xff1a;s “abcdef”&#xff0c;p “cdef”&#xff0c;p 在 s 中的位置是 2&#xff08;从 0 开始计数&#xff09;。 容易想到…...

放弃webstrom转战vscode

本来是webstrom的忠实用户&#xff0c;无奈webstrom要么需要在网上找一个破解版或者不断的去找激活码&#xff0c;且破解版和激活码的文章总是很多&#xff0c;但是要找到真正有效的却总是要花费不少功夫。终于忍无可忍&#xff0c;转战vscode。&#xff08;注&#xff1a;文中…...

VSCode 和 CLion

文章目录 一、VSCode1、文档2、插件3、智能编写4、VSCode 与 C&#xff08;1&#xff09;安装&#xff08;2&#xff09;调试&#xff08;a&#xff09;使用 CMake 进行跨平台编译与调试&#xff08;b&#xff09;launch.json&#xff08;c&#xff09;传参 &#xff08;3&…...

Learn Prompt- Midjourney Prompt:Prompt 提示语

基础结构​ 一个基本的提示可以简单到一个单词、短语或表情符号。非常短的提示将在很大程度上依赖于 Midjourney 的默认样式。 完整 prompt&#xff1a;可以包括一个或多个图像链接、多个文本短语或单词&#xff0c;以及一个或多个后缀参数 Image Prompts: 可以将图像 URL 添加…...

uvm白皮书练习_ch2_ch223_加入objection机制

UVM中通过objection机制来控制验证平台的关闭。 在每个phase中&#xff0c;UVM会检查是否有objection被提起&#xff08;raise_ objection&#xff09;&#xff0c;如果有&#xff0c;那么等待这个objection被撤销&#xff08;drop_objection&#xff09;后停止仿真&#xff1b…...

利用C++开发一个迷你的英文单词录入和测试小程序-增强功能

小玩具基本完成之后&#xff0c;在日常工作中&#xff0c;记录一些单词&#xff0c;然后定时再复习下&#xff0c;还真的有那么一点点用&#xff08;毕竟自己做的小玩具&#xff09;。 在使用过程中&#xff0c;遇到不认识的单词&#xff0c;总去翻译软件翻译&#xff0c;然后…...

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" \ -…...

IGP(Interior Gateway Protocol,内部网关协议)

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

高等数学(下)题型笔记(八)空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

Caliper 配置文件解析:config.yaml

Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...

django blank 与 null的区别

1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是&#xff0c;要注意以下几点&#xff1a; Django的表单验证与null无关&#xff1a;null参数控制的是数据库层面字段是否可以为NULL&#xff0c;而blank参数控制的是Django表单验证时字…...

智能职业发展系统:AI驱动的职业规划平台技术解析

智能职业发展系统&#xff1a;AI驱动的职业规划平台技术解析 引言&#xff1a;数字时代的职业革命 在当今瞬息万变的就业市场中&#xff0c;传统的职业规划方法已无法满足个人和企业的需求。据统计&#xff0c;全球每年有超过2亿人面临职业转型困境&#xff0c;而企业也因此遭…...

聚六亚甲基单胍盐酸盐市场深度解析:现状、挑战与机遇

根据 QYResearch 发布的市场报告显示&#xff0c;全球市场规模预计在 2031 年达到 9848 万美元&#xff0c;2025 - 2031 年期间年复合增长率&#xff08;CAGR&#xff09;为 3.7%。在竞争格局上&#xff0c;市场集中度较高&#xff0c;2024 年全球前十强厂商占据约 74.0% 的市场…...