vue之循环遍历v-for的使用

最新推荐文章于 2023-03-11 11:46:13 发布
最新推荐文章于 2023-03-11 11:46:13 发布
阅读量623 收藏
点赞数
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shaoming314/article/details/109441445
版权

vue之循环遍历v-for的使用

因为循环遍历后端的集合,是一件很正常的事情所以写这个博客

可以以自己写的html页面整合vue.js作为模板,以后进行参考

v-for的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04.Vue中v-for指令的使用</title>
	</head>
	<body>
		<div id="app">
			<span>{{user.name}} {{user.age}}</span>
			<br>

			<!-- v-for遍历对象 -->
			<span v-for="(value,key,index) in user">
				{{index}}:{{key}}:{{value}}
			</span>
			<!-- 通过v-for遍历数组 -->
		<ul>
			<li v-for="a,index in arr">
				{{index}}  {{a}}
			</li>
		</ul>
		<!-- 通过v-for遍历数组中的对象 -->
		<ul>
			<li v-for="user , index in  users">
				{{index+1}}{{user.name}}==={{user.age}}==={{user.content}}
			</li>
		</ul>
		</div>
		<!-- 引入vue.js -->
		<script type="text/javascript" src="../vue.js">

		</script>

		<script type="text/javascript">
			const app = new Vue({
				el: "#app",
				data: {
					user: {
						name: "小陈",
						age: 23
					},
					arr: ["北京校区", "天津校区", "河南校区"],
					users: [{
							id: "1",
							name: "xiaocheng",
							age: 23,
							content: "我曾经是个少年"
						},
						{
							id: "2",
							name: "小白",
							age: 23,
							content: "我曾经是一个邪恶的少年"
						}
					]
				},
				methods: {

				}
			});
		</script>
	</body>
</html>
不会打字314
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解在Vue.js编写更好的v-for循环的6种技巧
11-20
在VueJS中，v-for循环是每个项目都会使用的东西，它允许您在模板代码中编写for循环。 在最基本的用法中，它们的用法如下。 {{ product.name }} 但是，在本文中，我将介绍六种方法来使你的 v-for 代码更加精确，可预测和强大。 让我们开始吧。 1.始终在v-for循环中使用key 首先，我们将讨论大多数Vue开发人员已经知道的常见最佳做法——在 v-for 循环中使用 :key。通过设置一个惟一的键属性，它可以确保组件以您期望的方式工作。 果我们不
iOS Object-C辣鸡代码生成器-Python编写
11-27
本文件用于iOS object-c生成辣鸡代码，使用Python编写的工具。可以根据自己想要的内容进行修改。
编写v-for循环的技巧汇总
01-18
在 Vue.js 中，v-for 循环是每个项目都会使用的东西，它允许您在模板代码中编写 for 循环。 在最基本的用法中，它们的用法如下。 <ul> <li v-for=product> {{ product.name }} </li> </ul> 但是，在本文中，我将介绍六种方法来使你的 v-for 代码更加精确，可预测和强大。 让我们开始吧。 1.始终在 v-for 循环中使用 key 首先，我们将讨论大多数 Vue 开发人员已经知道的常见最佳做法——在 v-for 循环中使用 :key。通过设置一个惟一的键属性，它可以确保组件以您期望的方式工作。
Android Layer-list编写实战（代码）
03-16
摘要:Java源码,Android,Android源码　　Android Layer-list编写实战（代码），从一个Android编程实例包中摘出来的代码，层列表的运用Demo，同样是面向Android新手，有兴趣的请下载源码吧。
vue常用指令和用法
m0_62956385的博客
07-07 660
Vue常用的指令和用法
Vue3 v-for循环展示4条数据:
cc蒲公英的博客
07-06 1620
Vue3 v-for循环展示4条数据 限制遍历的条数
编写 Vue v-for 循环更优雅的 7 种方式
IT技术宅-北方的刀郎
05-10 1805
在Vue中，基本上每个项目都会用到v-for循环。它们允许你在模板代码中编写for循环。 这在碰到诸如以下情况时特别好用： 渲染数组或列表 遍历对象属性 在Vue中v-for循环最基本的用法是这样的： <ul> <liv-for='productinproducts'> {{product.name}} </li> </ul> 复制代码 但是，在本文中，我们将介绍一些超棒的方法，可以使你的v-for代码更加精确、可预测和高...
vue中的v-for循环
PCthedream的博客
09-21 3万+
1.v-for遍历普通数组1.v-for遍历普通数组in前面如果是一个变量，那么该变量保存的是数组中的数据in前面如果是两个变量，那么第一个变量保存的是数组中的数据，第二个变量保存的是下标。
vue v-for循环
weixin_43363801的博客
09-08 324
vue v-for循环
vue中用v-for循环出出来的div下面的span不给宽度也能相对于div居中
weixin_30627381的博客
05-16 1035
效果图 1.html <div> <div v-on:mousemove="dataDetails($event, item)" v-on:mouseleave="hiddenDetail($event)" v-for="(item, index) in sectionDiagram" :style="{height: it...
浅析vue中常见循环遍历指令的使用 v-for
12-29
vue中循环遍历使用的指令是v-for 1.v-for遍历数组 (1)value in arr 遍历数组中的元素 (2)(value,index) in arr 遍历数组中的元素和数组下标 运行代码： <body> <li v-for=value>{{value}}</li><br>　 ...
解决vue v-for 遍历循环时key值报错的问题
10-18
今天小编就为大家分享一篇解决vue v-for 遍历循环时key值报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
基于vue v-for 多层循环嵌套获取行数的方法
10-17
今天小编就为大家分享一篇基于vue v-for 多层循环嵌套获取行数的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
浅谈vue.js中v-for循环渲染
12-29
vue.js 的循环渲染是依赖于 v-for 指令，它能够根据 vue 的实例里面的信息，循环遍历所需数据，然后渲染出相应的内容。它可以遍历数组类型以及对象类型的数据，js 里面的数组本身实质上也是对象，这里遍历数组和对象...
2021/10/01 北京 v-for列表＜li＞遍历对象数组和对象
m0_56799642的博客
10-01 292
黑夜给了我黑色的眼睛，我却用它来寻找光明----顾城 今日甜点，v-bind," "双引号里面是一个表达式的值。 v-show ，可以条件渲染。底层是使用 style="display:none"实现。元素未被移除，只是样式被隐藏掉。 <img v-bind="isActive?'active':''"> 列表遍历对象数组 key值必须要变化，用p.id和index都可以，保证每一个Li标签都有不同的ID唯一标识 <ul> <li v-for="(p.inde.
Vue v-for详细使用
热门推荐
技术前端，忠于热爱 @0.活在风浪里
12-06 4万+
目录 定义vue数据❤ vue循环数组❤❤❤❤ vue循环对象❤❤❤❤ 效果❤ 四种创建对象的方法：❤❤❤ 两种创建数组的方法：❤❤❤ 对象的两种取值方式：❤❤❤❤ 数组扁平化❤❤ 声明函数的6种方式 for in 遍历对象的key 和 value❤❤❤ for of 遍历对象的key 和 值（value）❤❤❤ for in / for of 遍历数组 定义vue数据❤ data: { //数组 ...
Vue知识整理，让你快速入门Vue.js：03_10.本地应用：v-for指令（根据数据生成列表结构）
鲁迷那的专栏—坚持实践后再写出来！
03-22 838
目录 一、v-for 语法介绍 1、v-for指令_普通数组 2、v-for指令_对象数组 二、代码验证测试 1、v-for指令之数组 （1）实例代码 （2）效果展示 2、v-for指令之对象数组_结合其他指令 （1）实例代码 （2）效果展示 3、v-for指令之对象数组_添加删除 （1）实例代码 （2）效果展示 三、内容-总结 上一节我们介绍了图片切换的案例，对前面......
vue.js中v-for的使用及索引获取
wwf1225的博客
05-15 1万+
vue.js中v-for的使用及索引获取 1.v-for 　　直接上代码。 　　示例一： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-sc...
Vue v-for遍历详细使用
路虽远行则将至，事虽难做则必成。
03-11 4474
当v-for遍历的时候,一个参数是每一项值(item),2个参数是每一项值和索引(item,index),3个参数*是每一项值,索引,下标(item,index,i)。 当v-for遍历对象时,每一项，索引，下标，都有值。下标从0开始。 当v-for遍历数组对象时,每一项，索引，有值。 下标没有值，索引从0开始。 当v-for遍历数字时,每一项，索引，有值。下标没有值，索引从0开始，会跟上面的索引相同报错，不影响使用。
vue3,v-for遍历数组
最新发布
03-27
Vue 3是一种流行的JavaScript框架，用于构建用户界面。它是Vue.js的最新版本，具有许多改进和新功能。其中一个常用的功能是使用v-for指令来遍历数组。 在Vue 3中，使用v-for指令可以循环遍历数组，并为每个数组项生成相应的DOM元素。以下是使用v-for遍历数组的示例代码： ```html <template> <div> <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul> </div> </template> <script> export default { data() { return { items: [ { id: 1, name: 'Apple' }, { id: 2, name: 'Banana' }, { id: 3, name: 'Orange' } ] }; } }; </script> ``` 在上面的代码中，我们使用v-for指令来遍历名为items的数组。对于数组中的每个项，我们使用`:key`绑定一个唯一的标识符（在这里我们使用item的id属性）。然后，我们可以在模板中使用`{{ item.name }}`来显示每个项的名称。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值