【VUE复习·9】v-for 基础用法（循环渲染也叫列表渲染）

已于 2023-09-28 13:30:08 修改
阅读量599 收藏
点赞数
分类专栏： VUE知识体系 文章标签： 前端 vue.js javascript
于 2023-09-28 13:18:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43768851/article/details/133381333
版权

总览

1.v-for 都能循环什么
2.用法

一、v-for 都能遍历什么

能循环的东西包括：数组、对象、字符串（和java里面的3个引用数据类型一样）、纯粹循环数量（少用）

二、用法

1.用法1：简单循环（遍历数组）

注意 {{ }} 里面的写法。

在这里插入图片描述
在这里插入图片描述

2.用法2：“:key” 动态绑定数据 的用法

“:key” 就是说，根据什么来遍历。
默认为 index，也就是自动生成的唯一id。
当然了，我们可以指定让它根据我们规定的自己的数据的 id 进行遍历：

在这里插入图片描述

3.用法3：v-for 中遍历时可以是两个属性：数据 和 index

可以看到我们采用了这种写法： v-for=“(a,b,c) in persons”（用 of 和 in 都可）
这种写法，我们遍历到的是两个（虽然我们写了3个，但是不管写几个都只有前两个生效。它们分别代表引用数据类型的 json 数据 和 自动索引 index）

在这里插入图片描述
在这里插入图片描述

4.用法4：简单循环（遍历对象）

能够看到对象内的键值对。

在这里插入图片描述
在这里插入图片描述

5.用法5：遍历字符串 和 纯粹循环数量

这个自己看视频吧。用得不多。
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=29&spm_id_from=pageDriver&vd_source=38d6ea3466db371e6c07c24eed03219b

MicroLindb
关注
专栏目录
Vue循环遍历：v-for 指令
pan_junbiao的博客
08-21 546
在程序设计中，循环控制是变化最丰富的技术。Vue.js 提供了列表渲染的功能，可将数组或对象中的数据循环渲染到 DOM 中。在 Vue.js 中，列表渲染使用的是v-for 指令，其效果类似于 JavaScript 中的遍历。使用 v-for 指令渲染的元素列表在更新时，如果数据项的顺序被改变，Vue 不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素。为了是 Vue 能够跟踪每个 DOM 元素，需要为每一个数据项提供一个唯一的 key 属性。
v-for循环遍历
weixin_52580677的博客
01-07 1689
v-for遍历对象、数组和数组对象
VueJs之计算属性
weixin_30293135的博客
01-22 194
计算属性关键词: computed; computed vs methods 我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行; 可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods...
v-for
最新发布
2301_80089510的博客
08-28 636
通过v-forinlistlist。
vue实现点击某个标签元素，该标签元素显示红色
那就这样吧~
12-14 1543
案例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active { color: red; } </style> </head> <body> <div id="app"> <
Vue基础知识总结复习（一）
天山小雏菊的博客
09-10 327
Vue3基础知识总结复习（一）
前端之Vue：模板语法、指令、Style 和 Class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制
大大的博客
07-17 617
目录一、 模板语法插值语法二、 指令2.1 文本指令v-html：让HTML渲染成页面v-text：标签内容显示js变量对应的值v-show：显示/隐藏内容v-if：显示/删除内容2.2 事件指令v-on:click 可以缩写成@click2.3 属性指令v-bind:class=’js变量’可以缩写成：:class=’js变量’三、 Style 和 Class数据的绑定下方试验的命令四、 条件渲染五、 列表渲染1. v-if+v-for+v-else控制购物车商品的显示2. v-for遍历数组(列表)、对
2021-12-13 面试(一) v-if/for优先级,toFixed,keep-alive,语义化,vuex,vue双向数据绑定原理,插槽种类和作用
GAARA
12-13 403
文章目录 1.v-if和v-for的优先级 回答 补充 2.`0.1+0.2=0.3000000004` 回答 验证 3.keep-alive 回答 复习 4.语义化的理解 回答 5.vuex是什么?有什么用?使用场景是? 回答 补充 复习 6.`===`和`==`的区别 回答 7.vue 双向数据绑定的原理 回答 补充 8.vue插槽种类和作用 回答 复习 9.es6新增特性(10个以上) 回答: 10.简述封装vue组件的过程 回答 补充 11.vue3都有什么 12.说一下原型链 回答 复习 13.输
vue基础学习复习笔记(一)，包括（vue基本概念、@vue/cli脚手架、vue指令、过滤器、计算属性、侦听器等基本概念）
weixin_60896381的博客
07-10 1184
本文包含 vue基础 等内容，参考于 黑马PPT 通过自己理解整理，所以这是一篇用于小白新手入门，或者复习使用的笔记，主要包括（vue基本概念、@vue/cli脚手架、vue指令、过滤器、计算属性、侦听器等基本概念） 如有做的不好的地方，敬请谅解，欢迎指出，持续更新改正.........
vue基础知识及思维导图，安装脚手架详细过程
06-03
比如`v-if`用于条件渲染，`v-for`用于循环遍历数组或对象。 - **组件**：组件是Vue应用程序的基本构建块。它们是自包含且可复用的代码片段，可以极大提高代码的复用性和维护性。 - **路由**：Vue Router是一个官方...
v-for的四种使用方法
qq_39239110的博客
02-20 5万+
v-for的四种使用方法分别是： 1.使用v-for循环一个简单的数组 2.使用v-for循环一个复杂的数组 3.使用v-for循环对象 4.v-for循环一个迭代的数字 &amp;lt;div id=&quot;app&quot;&amp;gt; &amp;lt;!--v-for循环一个简单的数组--&amp;gt; &amp;lt;p v-for=&quot;item in list&q
vue-常见用法for
我的E家
11-25 1390
v-for使用 <div id="app"> <!--v-for循环普通数组--> <div v-for="(item,index) in list">单项:{{item}}---索引号:{{index}}</div> <div v-for="item in list">---单项---{{item}}</div> <!--v-for循环对象数组-->
Vue v-for列表循环
__盛某人的博客
03-12 1197
v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。 v-for的关键词in可以用of来替代 v-for循环数组 <ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li&g...
vue v-for遍历对象
weixin_42508745的博客
01-04 703
语法格式 (value,key,index) in user 其中： key,和index是可选参数。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入最新的vue稳定版本--> <script type="text/javascript" src="ht
[Vue] 10.Vue的列表循环渲染 v-for
u014627255的博客
05-30 762
使用v-for渲染list中的内容 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .
vue v-for循环数据列表，点击获取循环列表当前项的某一项的数据
m0_74387152的博客
12-05 1415
vue v-for循环数据列表，点击获取循环列表当前项的某一项的数据
V-for的使用
热门推荐
sdrfsef的博客
05-10 5万+
目录 v-for遍历数组和对象 1. v-for遍历普通数组 2.v-for遍历对象数组 3.v-for遍历对象 1. v-for遍历普通数组 语法 :v-for="(item,index) in array" item :数组中的每一项 index :索引值 如果只需要第一个参数item ,index可以不写,括号可以省略 <body> <div id="app"> <ul> <!-- in前边只写一个变量,变...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MicroLindb

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值