v-for的用法

最新推荐文章于 2024-04-20 06:32:12 发布
最新推荐文章于 2024-04-20 06:32:12 发布
阅读量1.3k 收藏 2
点赞数 3
分类专栏： 前端基础-Vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40951289/article/details/106991719
版权
说明

今天将介绍一下vue.js中的v-for的用法。
在这里插入图片描述

用法

直接上代码了。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div id="app">
		<!-- item是目标数组的每一项,index是对应的下标 -->
			<ul v-for="(item,index) in arr">
				<li>{{item}}</li>
			</ul>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			new Vue({
				el: "#app",
				data: {
					arr: [1, 2, 3, 4]
				},
			});
		</script>
	</body>
</html>

这里我们使用v-for来遍历数组arr，然后显示在页面中。代码运行结果如下图。
在这里插入图片描述
当目标是一个对象时，结果有什么不同呢？

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div id="app">
			<ul v-for="(item,name,index) in obj">
				<li>{{item}}</li>
			</ul>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			new Vue({
				el: "#app",
				data: {
					obj:{
                        a:1,
                        b:2,
                        c:3
                    }
				},
			});
		</script>
	</body>
</html>

此时v-for中有三个参数，item是对象每一项的value值(这里的1，2，3)，name是每一项的key值（这里的a，b，c），index是索引值。

结语

如果这篇文章对你有帮助，记得给我点赞评论吧！谢谢！
在这里插入图片描述

我有一个梦！
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
解决v-for中使用v-if或者v-bind:class失效的问题
10-17
在Vue.js开发过程中，我们经常会遇到在`v-for`循环中使用`v-if`或`v-bind:class`（简写为`:class`）时遇到一些失效的问题。这主要是由于Vue的渲染机制导致的，理解这个问题的关键在于理解Vue的响应式系统和虚拟DOM的...
解决vue组件中使用v-for出现告警问题及v for指令介绍
08-28
在 Vue 组件中使用 v-for 指令时，经常会出现告警问题，这篇文章将为大家介绍解决该问题的方法，并详细介绍 v-for 指令的使用。 解决 Vue 组件中使用 v-for 告警问题 在项目中运行 v-for 代码段时，可能会出现告警...
v-for参数详解
VCDA的博客
11-21 1380
v-for参数详解
react、vue中的key的作用
Web_South_Bay的博客
09-06 347
一、虚拟DOM中key的作用： key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会跟据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下： 二、对比规则： 1.旧虚拟DOM中找到了与新虚拟DOM相同的key： 1）若虚拟DOM中内容没变，直接使用之前的真实DOM。 2）若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。 2.旧虚拟DOM...
Vue v-for详细使用
最新发布
2401_84150107的博客
04-20 912
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车免费领取！**如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）[外链图片转存中…(img-GOQif2uH-1713565855518)]
Vue中控制v-for循环次数的方法
Byte_Dance的博客
01-30 6271
在Vue中的遍历方法v-for控制循环次数的方法可以通过以下两种方法 1.截取循环的数据     v-for="(item,index) in domainList.slice(0, 2)"     用这样的方法可以截取循环的数据长度，从而控制循环的次数 2.通过v-if来控制      v-for="(item,index) in domainList" v-if="index&lt;3...
Vue系列教程（十一）v-for指令的四种使用方式
Hit the keyboard hard
02-12 495
v-for有三种用法: 1.迭代数组 v-for迭代普通数组的方式如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-for循环普通数组</title> </head> <body> &l...
vue中 v-for循环的用法详解
11-21
1、v-for循环普通数组 ①创建vue对象 ② 循环数据 结果： 2、v-for循环对象数组 ① 创建vue实例对象 ② 循环对象数组 结果： 3、v-for循环对象 ①创建vue对象实例 ②循环对象 结果： 4、v-for循环数字 ①创建vue对象实例 ②循环数字 结果： 5、v-for中key的使用方式 ①创建vue对象实例 注意：push()方法一般是添加到数组的最后的位置；unshift()方法是往最前面的位置添加。 ②循环 注意： v-for循环的时候，key属性只能使用number或String。key在使用的时候，必须使用v-bind属性绑定的形式，指
在vue的v-for中使用索引index值
01-06
下面我们将详细探讨在Vue的`v-for`中如何使用索引`index`值。 首先，`v-for`语法的基本形式是： ```html <template v-for="(item, index) in array"> <!-- 内容 --> ``` 这里的`item`是数组中的当前项，`index`...
vue的注意规范之v-if 与 v-for 一起使用教程
10-16
主要介绍了vue的注意规范之v-if 与 v-for 一起使用方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
v-for循环的使用方法
qq_44130891的博客
05-18 1117
v-for
关于v-for的item-index-key的理解
qq_25327339的博客
10-17 863
【代码】关于v-for的item-index-key的理解。
VUE语法：v-for指令的四种用法
qq_42586648的博客
07-25 2万+
最近在学习VUE，目前酸菜鱼也才刚开始几天，或许是没天赋之前接触框架也很浅显，很多稍难地方学习的不通透，简单的反倒一过就忘记了。于是想要把简单基础逐步简单梳理一遍，以防万一自己连基础的都学不到，分享给大家共同总结学习。 v-for的四种应用方式: 方式一：v-for循环普通数组 //土蛋方法： <p>{{list[0]}}</p> <p>{{list[1...
vue中v-for的用法
热门推荐
前端岚枫
03-05 12万+
当需要将一个数组遍历或枚举一个对象循环显示时候，我常用的就是列表渲染指令v-for. 它需要结合着in 或者of来使用，如下 &lt;div id="app"&gt; &lt;ul&gt; &lt;li v-for="（person, index） in persons"&gt; {{ person.name }} &lt;/li&gt; &lt;/ul&gt; &lt;/
vue v-for 数据处理
wngzhem的博客
11-18 2万+
v-for的使用的方法，和注意事项。v-for 给了两个参数 key 和 index 这里需要对遍历的数据 分为 数组 和 对象分别对待 数组下是没有 key值的 而对象下可以得到参数key值 实际显示效果如下：
vue的v-for使用
赵圆圆
04-07 2916
在vue中 v-for="todo in todos" 的意思为一个参数作为值 <div v-for="value in object"> {{value}} </div> 第二个参数作为键名 <div v-for="(value,key) in object"> {{key}} - {{value}} </div> 第三个参数作为当前项的索引 <div v-for="(value,ke
2补：v-for - 列表渲染的用法 和 他的参数
Bi-Hu的博客
06-26 84
请先看 ：https://www.cnblogs.com/bi-hu/p/14920081.html 在看此文章 因为写着写着出疑惑了 其实已经讲过这个，但是他的解析遍历值可以是数组也可以是对象语法，所以就出来了这个问题: 我们先试一下遍历 数组语法 这个比较容易点： <script src="js/vue.js"></script> <div id="app"...
vue vue-router传参，v-for与v-if结合遍历显示该参数对应的内容
ColourfulTiger的博客
06-09 6989
问题描述：接着上一篇的router-view来讲，本次主要解决的是获取地址栏的http://localhost:8081/#/HelloWorld/engine/2中的参数id的值：2，怎样通过2来使用v-for遍历数组中对应的id为2的那一栏数据，注：仅显示id为2的这一项内容。即通过参数传递过来的值决定最终要显示的数组中的那一项内容。环境：webpack v-cli1、基本配置操作（1）rou...
[vue] 常见用法之 v-for
我是z先生
05-13 7709
我们使用vue，在对一组数组列表进行渲染的时，会使用到 v-for 指令。 v-for 指令使用 item in items 形式语法，items是源数据数组， item 是数组元素迭代的别名。 <ul> <li v-for="item in items"> {{ item.name}} </li> </ul> data: ...
v-for用法vue
08-23
v-for是Vue.js中的一个指令，它用于在模板中遍历数组或对象，并按照指定的方式进行渲染。可以通过在元素上使用v-for指令来循环渲染元素。在Vue.js中使用v-for指令需要结合in或者of来使用。 例如，在Vue.js中使用v-for指令来遍历数组，可以使用以下语法： ``` <ul> <li v-for="item in language">{{ item }}</li> </ul> ``` 其中，language就是要遍历的数组，item表示数组中的每个元素。在这个例子中，会根据language数组的长度复制相应数量的li元素，每个li元素中的内容为数组中的每个元素。 除了遍历数组，v-for指令也可以用于遍历对象。例如： ``` <ul> <li v-for="(item, index) in person">{{ index }}. 我会使用: {{ item }}</li> </ul> ``` 在这个例子中，person表示要遍历的对象，item表示对象中的每个属性值，index表示属性的索引。在每个li元素中，会显示索引值以及属性值。 总结来说，v-for指令是Vue.js中一个常用的遍历方法，它可以用于循环渲染数组或对象，并按照指定的方式进行渲染。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue快速入门(九) 之 v-for用法](https://blog.csdn.net/weixin_44415928/article/details/104904997)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [vue中v-for的用法](https://blog.csdn.net/yilanyoumeng3/article/details/88176124)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值