Vue - v-for

最新推荐文章于 2022-09-23 17:25:02 发布
最新推荐文章于 2022-09-23 17:25:02 发布
阅读量789 收藏 1
点赞数 1
分类专栏： 前端框架 文章标签： vue html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37960603/article/details/109509541
版权

推荐：Vue汇总

Vue - v-for

v-for 使用

v-for就相当于程序语言中的for一样，可以遍历一个Array、Object、number、string、Iterable(2.6 新增)。

遍历Array。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-for</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="div">
			<ul>
				<li v-for="item in list">{{item}}</li>
			</ul>
		</div>
	</body>
</html>
<script>
	var vue = new Vue({
		el: '#div',
		data: {
			list: ['Java' , 'Vue']
		}
	})
</script>

在这里插入图片描述
遍历Array，增加索引。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-for</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="div">
			<ul>
				<li v-for="(item,index) in list">list[{{index}}] : {{item}}</li>
			</ul>
		</div>
	</body>
</html>
<script>
	var vue = new Vue({
		el: '#div',
		data: {
			list: ['Java' , 'Vue']
		}
	})
</script>

在这里插入图片描述
遍历Object。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-for</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="div">
			<ul>
				<li v-for="(item,index) in list">list[{{index}}] : [{{item.username}} , {{item.password}}]</li>
			</ul>
		</div>
	</body>
</html>
<script>
	var vue = new Vue({
		el: '#div',
		data: {
			list: [{
				username: 'kaven',
				password: '123'
			},{
				username: 'jack',
				password: '456'
			}]
		}
	})
</script>

在这里插入图片描述
遍历Object，增加属性名。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-for</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="div">
			<ul>
				<li v-for="(item,key,index) in list">list[{{key}}] : [{{item}}] 是第{{index}}个属性</li>
			</ul>
		</div>
	</body>
</html>
<script>
	var vue = new Vue({
		el: '#div',
		data: {
			list: {
				username: 'kaven',
				password: '123'
			}
		}
	})
</script>

在这里插入图片描述
遍历number。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-for</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="div">
			<ul>
				<li v-for="count in 5">这是第{{count}}次</li>
			</ul>
		</div>
	</body>
</html>
<script>
	var vue = new Vue({
		el: '#div'
	})
</script>

在这里插入图片描述
遍历string。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-for</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="div">
			<ul>
				<li v-for="item in list" >{{item}}</li>
			</ul>
		</div>
	</body>
</html>
<script>
	var vue = new Vue({
		el: '#div',
		data: {
			list: 'kaven'
		}
	})
</script>

在这里插入图片描述
遍历Iterable。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-for</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="div">
			<ul>
				<li v-for="item in list" >{{item}}</li>
			</ul>
		</div>
	</body>
</html>
<script>
	var vue = new Vue({
		el: '#div',
		data: {
			list: new Set(['Kaven' , 'Jack' , 'Java'])
		}
	})
</script>

在这里插入图片描述
遍历Iterable。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-for</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="div">
			<ul>
				<li v-for="item in map" >{{item[0]}}:{{item[1]}}</li>
			</ul>
		</div>
	</body>
</html>
<script>
	var vue = new Vue({
		el: '#div',
		data: {
			map: new Map([['key' , 'value'] , ['kaven' , 'jack']])
		}
	})
</script>

在这里插入图片描述

v-for key属性

通过程序来介绍。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-for</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="div">
			<input type="text" v-model="inputValue">
			<button v-on:click="click">提交</button>
			<ul>
				<li v-for="item in list" >
					<input type="checkbox" >{{item.name}}
				</li>
			</ul>
		</div>
	</body>
</html>
<script>
	var vue = new Vue({
		el: '#div',
		data: {
			list: [{
				id: 1,
				name: 'kaven'
			},{
				id: 2,
				name: 'jack'
			}],
			inputValue: '',
			id: 3
		},
		methods: {
			click(){
				this.list.unshift({id: this.id++ , name: this.inputValue});
				this.inputValue = '';
			}
		}
	})
</script>

unshift()：将新项添加到数组起始位置。

由上面程序可以得到如下图页面，先选择第一个。
**加粗样式**
然后，在输入框中输入Java，点击提交，得到下图，但这不是我们想要的效果，我们想要选择还是在kaven那里。
在这里插入图片描述
所以需要使用v-for的属性key。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-for</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="div">
			<input type="text" v-model="inputValue">
			<button v-on:click="click">提交</button>
			<ul>
				<li v-for="item in list" :key="item.id">
					<input type="checkbox" >{{item.name}}
				</li>
			</ul>
		</div>
	</body>
</html>
<script>
	var vue = new Vue({
		el: '#div',
		data: {
			list: [{
				id: 1,
				name: 'kaven'
			},{
				id: 2,
				name: 'jack'
			}],
			inputValue: '',
			id: 3
		},
		methods: {
			click(){
				this.list.unshift({id: this.id++ , name: this.inputValue});
				this.inputValue = '';
			}
		}
	})
</script>

和之前进行一样的测试，这次情况满足我们的需求。
在这里插入图片描述

可以简单的理解：加了key(一定要具有唯一性) 的checkbox跟这个key指定的参数进行了一个关联，默认应该是索引。

vue和react虚拟DOM的Diff算法大致相同，首先讲一下Diff算法的处理方法，对操作前后的Dom树同一层的节点进行对比，一层一层对比，如下图：
在这里插入图片描述

当某一层有很多相同的节点时，也就是列表节点时，Diff算法的更新过程默认情况下也是遵循以上原则。
比如这个情况：
在这里插入图片描述
我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的：
在这里插入图片描述
即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？
所以我们需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

在这里插入图片描述

v-for的使用就介绍到这里。

写博客是博主记录自己的学习过程，如果有错误，请指正，谢谢！

参考博客：

ITKaven
关注
专栏目录
vue-mobile-calendar:a vue component of calendar for mobile移动端vue日期选择组件
05-17
a vue component of calendar for mobile 移动端日期选择器（>=vue2.0） ，或手机扫描下方二维码 使用方法 npm安装 npm install vue-mobile-calendar import Calendar from 'vue-mobile-calendar' Vue.use(Calendar)...
vue-audio-better-易于为Vue 2.x创建自定义音频播放器组件。 有灵魂的进度条。-Vue.js开发
05-27
vue-audio-better Easy to create custom audio player components for Vue.js. 一个有灵魂的进度条。 A progress bar with soul. 简单、有趣的 audio 组件，非常感谢您的 star! Simple, f vue-audio-better Easy...
vue 实现v-for循环回来的数据动态绑定id
10-16
今天小编就为大家分享一篇vue 实现v-for循环回来的数据动态绑定id，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue使用v-for绑定两个属性拼接渲染界面
苦涩精灵的博客
10-16 793
现在从数据库取回的数据中，要渲染的image的src是imageHost+mainImage： 拼接方式： :thumb=“item.imageHost+’’+item.mainImage” <!-- 商品列表 --> <section class="product-list"> <div class="product-container"> <van-card v-for="(item,index) in products
vue 里面通过v-for循环出来多个相同样式的div,根据index作为对象的属性的参数拼接取值
是大林的林吖-博客
07-23 3299
一、[ ] 和 . 的区别 1、 . 是要对象存在该属性才可赋值取出 2、 [ ] 即使对象不存在该属性也可以赋值和取出 二、v-for循环 通过 v-for=“index of number” ，number为自定义的一个数字 三、.后面不能让字符串与index进行拼接，而[ ] 里面是可以让字符串与index进行拼接。即 对象[“字符串”+index] 四、代码实现 <div class="battery" style="margin-top: 10px; margin-left: 30px"&
【vue】v-for中动态加载图片，图片路径拼接问题
dujuancao11的博客
09-23 3245
字符串拼接：+ require
Vue语法之v-for与v-bind结合
Mr_xiaoxuboke的博客
05-19 950
说明: 方法一：里面的对象方法使用v-for遍历movies的元素和索引，:key后面会说到，这里就先不说，最好是加上，后面会有用，再动态绑定class对象，让索引等于当前元素的索引，最后使用@click添加一个监听事件，通过method中的调用让当前元素点击时发生变色。 方法二：在动态绑定class对象使用了三元表达式，其他都和方法一一样，使用三元表达式判断索引是否等于当前元素的索引，如果是返回style定义好的样式，否则为空，也就是变回原样。 代码如下： <!DOCTYPE html
在vue的v-for中使用索引index值
01-06
在Vue.js框架中，`v-for`指令是一个非常重要的特性，用于遍历数组或对象，渲染列表或重复的模板。当我们需要在`v-for`循环中跟踪每个项目的唯一标识或执行特定操作时，可以利用其提供的索引`index`值。下面我们将...
vue的注意规范之v-if 与 v-for 一起使用教程
10-16
在Vue.js中，`v-if` 和 `v-for` 是两个非常重要的指令，它们各自有着不同的用途。然而，当这两个指令同时使用时，需要注意一些规范和最佳实践，以避免性能问题和不必要的复杂性。以下是对 `v-if` 和 `v-for` 一起...
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
10-15
在使用Vue-drag-resize时，可以结合Vue的指令v-for来实现对列表中多个元素的拖拽和缩放操作。组件的属性包括但不限于： - w（width）: 设置元素的宽度。 - h（height）: 设置元素的高度。 - x（left）: 设置元素的...
动态css，style，v-for(拼接，节点)
Blue54的博客
05-16 753
标签样式style :style="'width:' + getWidth('.pickTitle' + index) + 'px'"> 事件： getWidth(classId) { const query = uni.createSelectorQuery().in(this) query.select(classId).boundingClientRect(data => { this.tabWidth[classId] = data.width /..
vue各种字符串拼接
热门推荐
w_t_y_y的博客
08-13 6万+
写法有两种：:title="`字符串${xx}`" 或 :title="'字符串' + xx" 都可以。如： 1、vue绑定值与字符串拼接： <el-option v-for="item in tableData" :key="item.account" :label= '`${item.name}${item.account}`' :value=...
v-for中通过item[a+b]获取数据的拼接方法
weixin_44479794的博客
04-18 710
假如有这样的数据，要求根据当前年级查询对应的科目成绩 index:1,//当前查询年级 data:[ { course:'语文', School_1:90,//一年级语文成绩 School_2:80,//二年级语文成绩 }, { course:'数学', School_1:90, School_2:80, }, { course:'英语', S
字符串中拼接v-for_Java 8中字符串拼接新姿势：StringJoiner
weixin_36173545的博客
01-31 313
在为什么阿里巴巴不建议在for循环中使用”+”进行字符串拼接一文中，我们介绍了几种Java中字符串拼接的方式，以及优缺点。其中还有一个重要的拼接方式我没有介绍，那就是Java 8中提供的StringJoiner ，本文就来介绍一下这个字符串拼接的新兵。如果你想知道一共有多少种方法可以进行字符串拼接，教你一个简单的办法，在Intellij IDEA中，定义一个Java Bean，然后尝试使...
vue中如何在v-for中动态的使用将index拼接字符串后绑定id属性
熊猫的故乡的博客
11-14 5万+
vue中如何在v-for中动态的使用将index拼接字符串后绑定id属性
(二)vue3之v-for Array Refs
weixin_50096821的博客
03-11 2657
1.简介 在vue2中，v-for绑定$refs将会自动生成一个refs的数组，但是在v-for中这种行为将会变得有歧义和不高效。 而在vue3中，这种用法就不会生效，因为vue3不会自动生成refs的数组。如果我们需要拿到多个的refs组成的数组，那么就需要使用函数的方式手动去绑定。 2.vue2中的用法 <template> <div> <ul> <!-- 绑定ref --> <li v-for="(item, i
vue.js 循环动态拼接id
qq_33871178的博客
01-24 5938
  静态html，调用一个gernerateId的方法  js 部分，在methods中定义这个方法，动态拼接id  
vue循环创建id拼接索引
qq_40308101的博客
07-11 1102
{{item}}
vue v-for用法
最新发布
01-04
以下是两种vue v-for的用法： 1. v-for循环普通数组 ```html <!-- 土蛋方法 --> <p>{{list[0]}} <p>{{list[1]}} <p>{{list[2]}} <p>{{list[3]}} <p>{{list[4]}} <!-- v-for方法 --> <p v-for="(item, i) in list">...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

ITKaven

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

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

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

打赏作者

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

抵扣说明：

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

余额充值