Vue 13 - 列表渲染 v-for
V-for介绍
当使用Vue.js框架时,可以使用v-for指令对数据进行循环遍历并渲染到模板中。v-for可以遍历数组、对象、字符串、指定次数等。
以下是v-for的用法:
遍历数组
<div v-for="(item, index) in items" :key="index"> {{ item }} </div>
其中items是数组数据,item是数组元素,index是数组索引。使用:key绑定index作为key值来提高渲染性能,并确保key的唯一性,避免在数据更新时产生渲染问题。
遍历对象
<div v-for="(value, key) in object" :key="key"> {{ key }}: {{ value }} </div>
其中object是对象数据,key是对象的键,value是对象的值。使用:key绑定key作为key值来提高渲染性能,并确保key的唯一性,避免在数据更新时产生渲染问题。
遍历字符串
<div v-for="char in 'hello'" :key="char"> {{ char }} </div>
遍历字符串时,v-for会将字符串解析为一个字符数组,然后遍历每个字符。使用:key绑定char作为key值来提高渲染性能,并确保key的唯一性,避免在数据更新时产生渲染问题。
指定次数遍历
<div v-for="n in 5" :key="n"> {{ n }} </div>
在v-for中指定一个数字,表示循环的次数。在上述例子中,v-for将会循环5次。使用:key绑定n作为key值来提高渲染性能,并确保key的唯一性,避免在数据更新时产生渲染问题。
需要注意的是,v-for指令的使用方式会根据不同的Vue版本而有所不同,例如在Vue 2.x版本中v-for的写法和Vue 3.x版本有所区别。
小功能介绍
1.遍历人员数组,放在人员列表中
2. 遍历汽车信息,放在汽车信息中
3. 遍历字符串,放在列表中。
4. 遍历指定次数,放在列表中。
要求,都使用v-for实现,结合Vue
实现结果截图

代码演示
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>基本列表</title><script type="text/javascript" src="../js/vue.js"></script>
</head><body><div id="root"><!-- 遍历数组, 用的最多--><h2>人员列表</h2><ul><!-- index是遍历时候的索引值,小括号可以不写,写了更加安全,不会引发不必要的问题 --><li v-for="(p, index) in personArr" :key="index">{{p.name}} - {{p.age}}</li></ul><!-- 遍历对象 --><h2>汽车信息</h2><ul><li v-for="(item, index) in car" :key="index">{{item}}</li></ul><!-- 遍历字符串 --><h2>测试遍历字符串</h2><ul><li v-for="(item, index) of str" :key="index">{{item}}</li></ul><h2>测试遍历指定次数</h2><ul><li v-for="(item, index) of 8" :key="index">{{item}}</li></ul></div></body>
<script>Vue.config.productionTip = false // 阻止vue在启动时生成生产提示new Vue({el: '#root',data: {personArr: [{ id: "001", name: '张三', age: 18 },{ id: "002", name: '李四', age: 19 },{ id: "003", name: '王五', age: 20 },],car: {name: '奥迪A8',price: '70万',color: '黑色'},str: 'hello'}})
</script>
</html>
相关文章:
Vue 13 - 列表渲染 v-for
V-for介绍 当使用Vue.js框架时,可以使用v-for指令对数据进行循环遍历并渲染到模板中。v-for可以遍历数组、对象、字符串、指定次数等。 以下是v-for的用法: 遍历数组 <div v-for"(item, index) in items" :key"index"> {{…...
XML复习
目录什么是XMLXML中的内容可以干什么XML文件的创建以及其格式XML的文档约束-DTD约数XML的文档约束-schema约束Dom4J 解析XML 文档什么是XML XML 全称(extensible Markup Lanage) 可扩展标记语言它是一种数据的表示形式, 可以存储复杂的数据格式以及我们自己定义的格式.XML经常…...
【python设计模式】10、组合模式
哲学思想 组合模式是一种设计模式,用于将对象组合成树形结构以表示部分-整体层次结构。该模式允许客户端统一处理单个对象和对象组合。 从哲学的角度来看,组合模式可以被视为关于整体和部分之间关系的哲学思想。在这个模式中,整体和部分之间…...
实验五 网络安全加固
目录 一、实验内容 二、实验环境 三、实验步骤 一、实验内容 在GRE VPN实验基础上,对网络进行安全加固。 1、在S0上配置端口安全,设置服务器端口MAC绑定、限制端口MAC连接数量为1,超过最大值则丢弃数据帧。 2、配置OSPF路由协议认证。 3…...
MongoDB综述【入门指南】
写这篇博客,正好是2023年4月5日15:29:31,是清明节,放假一天,我坐在我的小小租房室内,思考着没思考到啥,哈哈哈,感觉好着急啊!看完了一本《城南旧事》,但是就是不踏实,好吧~我来写一篇最近在学的一个技术 为了更优秀的自己~奥利给!! 首先,我们从最初级小白开始(因为自己也是小白…...
Python 3 备忘清单_开发速查表分享
Python 3 备忘清单 Python 3开发速查备忘单是 Python 3 编程语言的单页参考表入门,为开发人员分享快速参考备忘单。 开发速查表大纲 入门 介绍 Hello World 变量 数据类型 Slicing String Lists If Else 循环 函数 文件处理 算术 加等于 f-字符串(Python 3.6) P…...
Thinkphp 6.0模版的加载包含输出
本节课我们来学习一下模版标签中的文件的包含、输出以及加载。 一.包含文件 1. 使用{include}标签来加载公用重复的文件,比如头部、尾部和导航部分; 2. 在模版 view 目录创建一个 public 公共目录,分别创建 header、footer 和 nav…...
ROS实践11 自定义头文件并调用
文章目录运行环境:思路:1.1 编写头文件1.2 includepath添加头文件路径1.3 编写可执行文件1.4 配置文件1.5 编译运行运行环境: ubuntu20.04 noetic 宏基暗影骑士笔记本 思路: 类和函数: 头文件 声明 可执行文件 定义…...
一位年薪35W的测试被开除,回怼的一番话,令人沉思
一位年薪35W测试工程师被开除回怼道:“反正我有技术,在哪不一样” 一技傍身,万事不愁,当我们掌握了一技之长后,在职场上说话就硬气了许多,不用担心被炒,反过来还可以炒了老板,这一点…...
【Docker】Docker常用命令
帮助启动类命令 启动docker systemctl start docker停止docker systemctl stop docker重启docker systemctl restart docker查看docker状态 systemctl status docker[root192 ~]# systemctl status docker ● docker.service - Docker Application Container EngineLoaded…...
【linux基础】7.linux系统自定义应用名和应用图标
"懦弱之人毫无价值"1. 做应用和图标1.1.测试和加入侧边栏3. 命令行重命名唤醒任务叙述:有一个x.sh文件可以在命令行执行,sh x.sh,这样太麻烦。 将其做成app且配上logo,下次直接点击使用将其路径全名重命名,可以直接用重…...
10.网络爬虫—MongoDB详讲与实战
网络爬虫—MongoDB详讲与实战MongoDBMongoDB安装创建数据目录1.数据库操作2.集合操作3.文档操作4.索引操作5.聚合操作6.备份与恢复MongoDB增删改查mongodb集合的增删改查数据插入到表数据的查看删除数据更新数据PyMongo连接数据库第二步 选择需要使用的数据库和集合PyMongo增删…...
C4D -> Three.js资产制作与导入流程
这篇文章介绍从 Cinema 4D 中的 UV 模型到用于 Three.js 的 .glb/.gltf 资产和纹理的整个过程,该网格将依赖 MeshStandardMaterial 来复制你在 Redshift 中看到的内容, 没有由 Three.js 处理的任何照明。 推荐:用 NSDT场景设计器 快速搭建3D场…...
【博学谷学习记录】大数据课程-学习十三周总结
Hive的交互方式 第一种交互方式:bin/hive hive 创建一个数据库 create database mytest; show databases; 第二种交互方式:使用sql语句或者sql脚本进行交互 不进入hive的客户端直接执行hive的hql语句 hive -e “create database mytest2” 或者我们…...
Spring Cloud快速入门
文章目录Spring Cloud快速入门一、基础概念1、微服务架构2、微服务技术栈3、什么是Spring Cloud?4、Spring Cloud和Spring Boot的联系?5、比较成熟的互联网架构二、Rest环境搭建1、搭建提供者1.1、创建一个父工程1.2、创建一个springcloud-api模块1.3、创建一个spr…...
论文学习——VideoGPT
论文学习——VideoGPT: Video Generation using VQ-VAE and Transformers 原文链接:https://arxiv.org/abs/2104.10157 1. 设计思路 不同种类的生成模型在一下多个维度各有权衡:采样速度、样本多样性、样本质量、优化稳定性、计算需求、评估难易程度等…...
Flutter系列(五)底部导航详解
Flutter系列(四)底部导航顶部导航图文列表完整代码,如下: Flutter系列(四)底部导航顶部导航图文列表完整代码_摸金青年v的博客-CSDN博客 目录 一、前言 二、Scaffold组件 三、BottomNavigationBar组件 …...
『pyqt5 从0基础开始项目实战』02. 页面布局设计(保姆级图文)
目录弹性布局介绍导包和框架代码布局框架搭建1. 总体布局框架2. 顶部菜单布局3. form添加内容布局4. table数据展示布局5. footer底部菜单完整项目代码总结欢迎关注 『pyqt5 从0基础开始项目实战』 专栏,持续更新中 欢迎关注 『pyqt5 从0基础开始项目实战』 专栏&am…...
【Python机器学习】——平均中位数模式
Python机器学习——平均中位数模式 文章目录 Python机器学习——平均中位数模式一、Python 平均中位数模式一、Python 平均中位数模式 均值、中值和众数 从一组数字中我们可以学到什么? 在机器学习(和数学)中,通常存在三中我们感兴趣的值: 均值(Mean) - 平均值 中值(M…...
Windows窗口
Windows窗口 Unit01注册窗口类 01窗口类的概念 窗口类是包括了窗口的各种参数信息的数据结构每个窗口都具有窗口类,基于窗口类创建窗口每个窗口都具有一个名称,使用前必须注册到系统 02窗口类的分类 系统窗口类 系统已经定义好的窗口类,…...
进程地址空间(比特课总结)
一、进程地址空间 1. 环境变量 1 )⽤户级环境变量与系统级环境变量 全局属性:环境变量具有全局属性,会被⼦进程继承。例如当bash启动⼦进程时,环 境变量会⾃动传递给⼦进程。 本地变量限制:本地变量只在当前进程(ba…...
逻辑回归:给不确定性划界的分类大师
想象你是一名医生。面对患者的检查报告(肿瘤大小、血液指标),你需要做出一个**决定性判断**:恶性还是良性?这种“非黑即白”的抉择,正是**逻辑回归(Logistic Regression)** 的战场&a…...
day52 ResNet18 CBAM
在深度学习的旅程中,我们不断探索如何提升模型的性能。今天,我将分享我在 ResNet18 模型中插入 CBAM(Convolutional Block Attention Module)模块,并采用分阶段微调策略的实践过程。通过这个过程,我不仅提升…...
YSYX学习记录(八)
C语言,练习0: 先创建一个文件夹,我用的是物理机: 安装build-essential 练习1: 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件,随机修改或删除一部分,之后…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡,轻快的音乐在耳边持续回荡,小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下,六一来了。 今天是六一儿童节,小蓝老师为了让大家在节…...
第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明
AI 领域的快速发展正在催生一个新时代,智能代理(agents)不再是孤立的个体,而是能够像一个数字团队一样协作。然而,当前 AI 生态系统的碎片化阻碍了这一愿景的实现,导致了“AI 巴别塔问题”——不同代理之间…...
HBuilderX安装(uni-app和小程序开发)
下载HBuilderX 访问官方网站:https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本: Windows版(推荐下载标准版) Windows系统安装步骤 运行安装程序: 双击下载的.exe安装文件 如果出现安全提示&…...
实现弹窗随键盘上移居中
实现弹窗随键盘上移的核心思路 在Android中,可以通过监听键盘的显示和隐藏事件,动态调整弹窗的位置。关键点在于获取键盘高度,并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...
Device Mapper 机制
Device Mapper 机制详解 Device Mapper(简称 DM)是 Linux 内核中的一套通用块设备映射框架,为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程,并配以详细的…...
论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing
Muffin 论文 现有方法 CRADLE 和 LEMON,依赖模型推理阶段输出进行差分测试,但在训练阶段是不可行的,因为训练阶段直到最后才有固定输出,中间过程是不断变化的。API 库覆盖低,因为各个 API 都是在各种具体场景下使用。…...
