v-for中key的作用

最新推荐文章于 2023-08-01 21:14:25 发布

大魔王丫丫

最新推荐文章于 2023-08-01 21:14:25 发布

阅读量70

点赞数 1

分类专栏：面试文章标签： vue

本文链接：https://blog.csdn.net/weixin_48882471/article/details/116277079

版权

面试专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在说这个问题时,我要举个例子
在这里插入图片描述
没有key时的效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>
				<input type="text" v-model="name">
				<button @click="add">添加</button>
			</div>
			<ul>
				<li v-for="(item, i) in list">
					<input type="checkbox"> {{item.name}}
				</li>
			</ul>


		</div>


	</body>
</html>
<script src="./js/vue.js"></script>
<script>
	// 创建 Vue 实例，得到 ViewModel
	var vm = new Vue({
		el: '#app',
		data: {
			name: '',
			newId: 3,
			list: [{
					id: 1,
					name: '王丞相'
				},
				{
					id: 2,
					name: '李将军'
				},
				{
					id: 3,
					name: '赵兔华'
				}
			]
		},
		methods: {
			add() {
				//注意这里是unshift
				this.list.unshift({
					id: ++this.newId,
					name: this.name
				})
				this.name = ''
			}
		}
	});
</script>

我们在输入框里输入的是梁军师,下面选中的是李将军
在这里插入图片描述
当我们添加的时候,选中的李将军就变成了王丞相,这并不是我们想要的结果

加上key的效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>
				<input type="text" v-model="name">
				<button @click="add">添加</button>
			</div>
			<ul>
				<li i v-for="(item, i) in list" :key="item.id">
					<input type="checkbox"> {{item.name}}
				</li>
			</ul>


		</div>


	</body>
</html>
<script src="./js/vue.js"></script>
<script>
	// 创建 Vue 实例，得到 ViewModel
	var vm = new Vue({
		el: '#app',
		data: {
			name: '',
			newId: 3,
			list: [{
					id: 1,
					name: '王丞相'
				},
				{
					id: 2,
					name: '李将军'
				},
				{
					id: 3,
					name: '赵兔华'
				}
			]
		},
		methods: {
			add() {
				//注意这里是unshift
				this.list.unshift({
					id: ++this.newId,
					name: this.name
				})
				this.name = ''
			}
		}
	});
</script>

在这里插入图片描述

添加之后,还是第一次选中的状态,这就是我们想要的效果

总结

vue中列表循环需加:key="唯一标识" 唯一标识可以是item里面id index等，
因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 
key的作用主要是为了高效的更新虚拟DOM

大魔王丫丫

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-for中key的作用

在说这个问题时,我要举个例子没有key时的效果<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="app"> <div> <input type="text" v-model="name"> &l
复制链接

扫一扫