Vue2.0学习笔记-7、v-for指令以及key属性的使用、注意事项

最新推荐文章于 2023-03-19 12:16:03 发布
最新推荐文章于 2023-03-19 12:16:03 发布
阅读量578 收藏
点赞数
分类专栏： vue学习笔记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41364246/article/details/109607425
版权

v-for指令很像原生js中的foreach方法。

v-for指令的使用

1、使用v-for指令遍历普通数组

(1)语法

第一种调用方式

v-for="参数一，参数二 in 变量"

第二种调用方式

v-for="(参数一，参数二) in 变量"

其中参数代一表值，参数二代表索引值，参数二可省略，具体见示例

(2)示例

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style type="text/css">
			.color{
				color: #FF0000;
			}
		</style>
	</head>
	<body>
		<div id="app">
			1、循环普通数组
			<p :class="['color']" v-for="item in list">值：{{item}}</p>
			2、循环普通数组，带索引
			<p :class="['color']" v-for="key,item in list">值：{{key}},索引：{{item}}</p>
			3、循环普通数组，带索引
			<p :class="['color']" v-for="item,key in list">值：{{item}},索引：{{key}}</p>
			4、循环普通数组，带索引
			<p :class="['color']" v-for="(item,key) in list">值：{{item}},索引：{{key}}</p>
			5、循环普通数组，带索引
			<p :class="['color']" v-for="(key,item) in list">值：{{key}},索引：{{item}}</p>
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:'#app',
				data:{
					list:[12,22,43,42,51,64]
				}
			})
		</script>
	</body>
</html>

效果：
在这里插入图片描述
本示例中结合了v-bind指令绑定样式哦

2、使用v-for指令遍历对象数组

(1)语法

第一种调用方式

v-for="参数一，参数二 in 变量"

第二种调用方式

v-for="(参数一，参数二) in 变量"

其中参数代一表值，参数二代表索引值，参数二可省略，具体见示例

(2)示例

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style type="text/css">
			.color{
				color: #FF0000;
			}
		</style>
	</head>
	<body>
		<div id="app">
			1、循环对象数组
			<p :class="['color']" v-for="item in list">值：name={{item.name}},age={{item['age']}}</p>
			2、循环对象数组，带索引
			<p :class="['color']" v-for="key,item in list">值：name={{key.name}},age={{key['age']}},索引：{{item}}</p>
			3、循环对象数组，带索引
			<p :class="['color']" v-for="item,key in list">值：name={{item.name}},age={{item['age']}},索引：{{key}}</p>
			4、循环对象数组，带索引
			<p :class="['color']" v-for="(item,key) in list">值：name={{item.name}},age={{item['age']}},索引：{{key}}</p>
			5、循环对象数组，带索引
			<p :class="['color']" v-for="(key,item) in list">值：name={{key.name}},age={{key['age']}},索引：{{item}}</p>
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:'#app',
				data:{
					list:[{name:'小明',age:14},{name:'李华',age:15},{name:'张三',age:18}]
				}
			})
		</script>
	</body>
</html>

效果：
在这里插入图片描述

3、使用v-for指令遍历对象

(1)语法

第一种调用方式

v-for="参数一，参数二，参数三 in 变量"

第二种调用方式

v-for="(参数一，参数二，参数三) in 变量"

其中参数代一表键值，参数二代表键名，参数三代表索引值，参数二、三可省略，具体见示例

(2)示例

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style type="text/css">
			.color{
				color: #FF0000;
			}
		</style>
	</head>
	<body>
		<div id="app">
			1、遍历对象
			<p :class="['color']" v-for="node in user">值：{{node}}</p>
			2、遍历对象，带键名
			<p :class="['color']" v-for="node,i in user">值：{{node}}，键名：{{i}}</p>
			3、遍历对象，带键名
			<p :class="['color']" v-for="i,node in user">值：{{i}}，键名：{{node}}</p>
			4、遍历对象，带键名
			<p :class="['color']" v-for="(node,i) in user">值：{{node}}，键名：{{i}}</p>
			5、遍历对象，带键名
			<p :class="['color']" v-for="(i,node) in user">值：{{i}}，键名：{{node}}</p>
			6、遍历对象，带键名、索引
			<p :class="['color']" v-for="(i,node,index) in user">值：{{i}}，键名：{{node}},索引：{{index}}</p>
			7、遍历对象，带键名、索引
			<p :class="['color']" v-for="i,node,index in user">值：{{i}}，键名：{{node}},索引：{{index}}</p>
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#app",
				data:{
					user:{
						name:'李华',
						age:16,
						className:'高三14班'
					}
				}
			})
		</script>
	</body>
</html>

效果：
在这里插入图片描述

4、使用v-for指令遍历数字

(1)语法

第一种调用方式

v-for="参数一，参数二 in 变量"

第二种调用方式

v-for="(参数一，参数二) in 变量"

其中参数代一表值，参数二代表索引值，参数二可省略，具体见示例

(2)示例

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style type="text/css">
			.color{
				color: #FF0000;
			}
		</style>
	</head>
	<body>
		<div id="app">
			1、遍历数字
			<p :class="'color'" v-for="val in 13">{{val}}</p>
			2、遍历数字，带索引
			<p :class="'color'" v-for="val,index in 13">{{val}},{{index}}</p>
			3、遍历数字，带索引
			<p :class="'color'" v-for="(val,index) in 13">{{val}},{{index}}</p>
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:'#app',
				
			})
		</script>
	</body>
</html>

效果：
在这里插入图片描述
注意：v-for指令遍历数字时，并不是从0开始遍历，而是从1开始

5、重点：v-for指令中key属性的搭配使用

自vue2.2版本开始，在组件中使用v-for指令时，必须使用key属性。不使用会怎样呢？

(1)不使用key属性

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style type="text/css">
			.color{
				color: #FF0000;
			}
		</style>
	</head>
	<body>
		<div id="app">
			id:<input type="text" name="" id="" v-model="id" />
			name:<input type="text" name="" id="" v-model="name" />
			age:<input type="text" name="" id="" v-model="age" />
			<button type="button" @click="add">添加</button>
			<p :class="'color'" v-for="item in list" ><input type="checkbox">{{item.id}},{{item.name}},{{item.age}}</p>
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:'#app',
				data:{
					id:'',
					name:'',
					age:'',
					list:[{id:1,name:'小明',age:14},{id:2,name:'李华',age:15},{id:3,name:'张三',age:18}]
			},
			methods:{
				add:function(){
					this.list.unshift({id:this.id,name:this.name,age:this.age});
				},
			},
			})
		</script>
	</body>
</html>

执行结果：
在这里插入图片描述
此时，让我们选中第二个p标签，并在上面三个输入框中输入内容，如下：
在这里插入图片描述
点击添加按钮，结果如下：
在这里插入图片描述
此时，结果和我们想象中的并不一致，程序并没有记住我们所选的内容

(2)使用key属性

代码：注意key属性是怎么使用的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style type="text/css">
			.color{
				color: #FF0000;
			}
		</style>
	</head>
	<body>
		<div id="app">
			id:<input type="text" name="" id="" v-model="id" />
			name:<input type="text" name="" id="" v-model="name" />
			age:<input type="text" name="" id="" v-model="age" />
			<button type="button" @click="add">添加</button>
			<p :class="'color'" v-for="item in list" :key="item.id"><input type="checkbox">{{item.id}},{{item.name}},{{item.age}}</p>
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:'#app',
				data:{
					id:'',
					name:'',
					age:'',
					list:[{id:1,name:'小明',age:14},{id:2,name:'李华',age:15},{id:3,name:'张三',age:18}]
			},
			methods:{
				add:function(){
					this.list.unshift({id:this.id,name:this.name,age:this.age});
				},
			},
			})
		</script>
	</body>
</html>

点击添加按钮前：
在这里插入图片描述
点击添加按钮后：
在这里插入图片描述
此时，程序的执行结果即是我们想要的

(3) 使用key属性时的注意事项

(1)key属性绑定的值只能是string或number类型
将上面例子中的key属性绑定的值改为对象：

			<p :class="'color'" v-for="item in list" :key="item"><input type="checkbox">{{item.id}},{{item.name}},{{item.age}}</p>

控制台报错：
在这里插入图片描述

(2)key属性绑定的值必须是唯一值！
当我们给网页上添加如下内容时：
在这里插入图片描述
此时，我们勾选两个id为2的p标签：
在这里插入图片描述
在添加一个id为2的标签，此时结果和预想的不同(key属性绑定的是id)，同时控制台报错：
在这里插入图片描述

控制台显示的错误是：key属性值重复。即key绑定的值应是唯一的！

不收藏找不到我
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE之v-for循环、key的使用和注意事项
qq_46179813的博客
05-27 1775
1、v-for循环普通数组、对象数组 <body> <div id="app"> <span v-for="item in list">{{item}}</span> <h3 v-for="(item,i) in list">索引值是：{{i}}------每一项是：{{item}}</h3> <h4 v-for="(user,h) in list2">索引值是：{{h}}------每一项是：{{us
Vue2.0 v-for 中如何不加key 会有什么后果？
weixin_43416349的博客
05-27 753
一个组件，根据 一个arr = 【1，2，3】用v-for，然后创建了三个组件。 那么，删除掉 arr 中的 2 ， 那么根据响应式，就变成了两个组件。 那么，你猜，本来arr中的第二个组件应该被删除对吧，但事实上是，第三个组件被删除了。 参考：面试大厂必问：虚拟DOM与DOM Diff 的原理【硬核干货大厂手册】_哔哩哔哩_bilibili求点赞，收藏，投币咨询课程或者进交流群加小助手wx：xiedaimala04（备注：前端资源，小助手会发你前端资源干货哟）主讲人方应杭的微信：f.
v-for中key的作用：为什么使用v-for时必须添加唯一的key属性
最初都是小白
05-07 1万+
key的作用：   key是为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一的key属性。 先来举个例子： 一、没有加key： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=...
for 循环默认是从0开始的
qq_34697721的博客
11-08 1271
for循环默认是从0开始的
让你更了解v-for迭代循环
alenzzzhang
05-29 673
Vue中的v-for迭代循环 1,迭代数组 定义格式如下： v-for=’(item[,i]) in arr’ 说明： item表示值，i表示索引，为可选项，arr是被迭代数组   主要代码演示如下： <div id="app"> <h3 v-for='(item,i) in arr'>值为：{{ item }}--->索引值为：{{i}}</...
浅谈Vue2.0中v-for迭代语法的变化(key、index)
08-27
在Vue2.0中，`v-for`指令的迭代语法相比Vue1.x做了一些重要的调整，这些变化影响了如何在循环中处理数组和对象。本文将深入探讨这些变化，特别是涉及`key`和`index`的用法。 首先，让我们回顾一下Vue1.x中的`v-for`...
Vue中的v-for循环key属性注意事项小结
10-18
8. **总结**：总的来说，`v-for`循环中使用`key`属性是Vue开发中的良好实践，它提高了渲染效率并避免了因元素复用导致的问题。理解何时以及如何使用`key`是Vue开发中的一项基本技能。 通过上文示例代码，我们可以...
vue2.0使用v-for循环制作多级嵌套菜单栏
12-29
使用v-for循环生成一个多级嵌套菜单栏，只要你学会了这个方法，几乎所有的菜单栏都可以实现了。 方法 <div class=level-one v-if=obj.level v-for=obj><a>{{obj.title}} <div class=level-two v-if=obj1.parentId ...
vue的注意规范之v-if 与 v-for 一起使用教程
10-16
在Vue.js中，`v-if` 和 `v-for` 是两个非常重要的指令，它们各自有着不同的用途。然而，当这两个指令同时使用时，需要注意一些规范和最佳实践，以避免性能问题和不必要的复杂性。以下是对 `v-if` 和 `v-for` 一起...
Vue从0开始
prxhlirr的博客
09-25 683
Vue从0开始 1、Vue指令 直接代码吧！ 点击按钮使方块隐藏显示，实例如下： <script type="text/javascript" src="vue.js"></script> <style type="text/css"> .div1 {width: 100px; height: 100px; background: red; margin...
浅谈vue当中的v-for
wazj733的博客
03-19 768
看完一定会明白的 v-for
vue 中 v-for 循环数字，index 从0开始。
是秃子总会发光
02-15 1万+
vue 中 v-for 循环数字，index 从0开始。
vue使用技巧:v-for配合option时不能出现0的解决方法
webfullstack的博客
10-08 3822
code 示例 &amp;amp;lt;el-form-item label=&amp;quot;生育情况&amp;quot;&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;flex-box&amp;quot;&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;flex1&am
vue中的v-for循环
热门推荐
PCthedream的博客
09-21 4万+
1.v-for遍历普通数组1.v-for遍历普通数组in前面如果是一个变量，那么该变量保存的是数组中的数据in前面如果是两个变量，那么第一个变量保存的是数组中的数据，第二个变量保存的是下标。
Vue v-for遍历详细使用
路虽远行则将至，事虽难做则必成。
03-11 4704
当v-for遍历的时候,一个参数是每一项值(item),2个参数是每一项值和索引(item,index),3个参数*是每一项值,索引,下标(item,index,i)。 当v-for遍历对象时,每一项，索引，下标，都有值。下标从0开始。 当v-for遍历数组对象时,每一项，索引，有值。 下标没有值，索引从0开始。 当v-for遍历数字时,每一项，索引，有值。下标没有值，索引从0开始，会跟上面的索引相同报错，不影响使用。
v-for 无法遍历数据，不执行循环
飞鸿小子的博客
08-14 8847
myAdsList:function(){ var myAdsList = [ { "id": 4, "area": "广东省广州市", "info": "123", ...
v-for循环数据中无数据时，循环不进行，这时就需要单独渲染代码
qianxiao_a的博客
05-22 1755
我用v-for训话一个maillist的时候发现一个问题，当点击触发事件时，list中如果没有数据的话，循环是不会执行的，循环中的代码也无法执行，这里如果想要执行一个事件的话就要对某个控件进行单独渲染 这是渲染之前的代码 点击发件后无反应，循环内代码没执行 这是渲染后的代码 将要操作的控件复制一份到循环外 加一个v-if判断就可以了 ????再小的帆也要远航 ...
Vue中v-for循环
m0_64026548的博客
05-10 1万+
v-for循环遍历数据 永远不要把v-if和v-for同时用在同一个元素上。风格指南 — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://cn.vuejs.org/v2/style-guide/#%E9%81%BF%E5%85%8D-v-if-%E5%92%8C-v-for-%E7%94%A8%E5%9C%A8%E4%B8%80%E8%B5%B7%E5%BF%85%E8%A6%81 1.v-for遍历普通数组 in...
Vue（框架）
qq_60509834的博客
09-13 1683
Vue（框架） 概述： 是一个轻量级 渐进式的 前端框架 特点: 数据驱动 MVVM 组件化 好处: 封装了DOM操作元素的API 使用步骤： 导入vue.hs文件（Vue框架提供的） 入门案例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 Vue框架</title> <!-- 1. 引入外部的vue.js文件 --..
vue2.0使用vue-quill-editor
最新发布
07-28
Vue.js是一个用于构建用户界面的JavaScript框架，而vue-quill-editor是一个基于Quill.js的富文本编辑器组件，用于在Vue.js项目中实现富文本编辑功能。 要在Vue.js项目中使用vue-quill-editor，首先需要安装它。可以...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值