12.Vue列表渲染v-for标签的使用，数组更新时如何操作，组件上使用

最新推荐文章于 2023-08-22 16:41:00 发布

秀聚

最新推荐文章于 2023-08-22 16:41:00 发布

阅读量1.9k

点赞数 1

分类专栏： # Vue 文章标签： vue 原力计划

本文链接：https://blog.csdn.net/weixin_43852058/article/details/116463704

版权

Vue 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

v-for用法

列表类型
- 代替写法 in = of
对象类型

列表类型

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

v-for 还支持一个可选的第二个参数，即当前项的索引，支持形式(item, index) in items 。

其中 item 是列表中的元素，index 是索引，items 是将要遍历的列表。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表渲染</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app">
			<p v-for="(item, index) in list">
				{{index}}. 跟我一起学习{{item}}
			</p>
		</div>
	</body>
	<script>
		const app = {
			data() {
				return {
					list: ['Java', 'Vue', '设计模式']
				}
			}
		}

		Vue.createApp(app).mount('#app')
	</script>
</html>

运行效果：
在这里插入图片描述
index 索引从0开始，item 是遍历到的数组元素。

代替写法 in = of

其中 in 关键词可以使用 of 代替。

(item, index) in items 跟 (item, index) of items 的效果是一样的。

对象类型

使用v-for指令遍历对象类型，对象类型在遍历的时候，可以有三个参数，第一个参数是对象的 value 值，第二个参数是对象的 key 值，第三个参数是索引值。

例如：v-for="(value, name, index) in items" 中，value 是对象的值，name是对象的key，index 是索引。
注意：

参数不必全写，写几个会依次匹配，比如写一个就是会是值，写两个就是值，key。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对象渲染</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app">
			<!--
				第一个参数value是对象的值，
				第二个参数name是对象的键，
				第三个参数index是遍历的索引
			-->
			<p v-for="(value, name, index) in items">
				{{index}}.{{ name }}----{{ value }}
			</p>
		</div>
	</body>
	<script>
		const app = {
			data() {
				return {
					items: {
						name: '金毛',
						characteristic: '导盲犬，温顺',
					}
				}
			}
		}

		Vue.createApp(app).mount('#app')
	</script>
</html>

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

key 属性

注意：

这个key 不是上边所说的遍历对象时候的key。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性
建议尽可能在使用 v-for 时提供 key 属性，因为它是 Vue 识别节点的一个通用机制

<!--因为key需要保证唯一，可以使用遍历时候的索引作为key，
	如果item中有唯一标识的话，也可以使用item的唯一标识。
-->
<div v-for="(item, index) in items" :key="index">
  <!-- 内容 -->
</div>

v-for 数据的更新检测

变更方法

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

push() 在尾部添加元素
pop() 删除尾部元素
shift() 删除头部元素
unshift() 在头部添加元素
splice() 删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
sort() 排序
reverse() 反转

你可以打开控制台，然后对前面例子的 items 数组尝试调用变更方法。

当调用的方法不是改变了原数组，而是产生了新的数组，则可以使用新数组替代老数组，从而实现渲染列表刷新的效果。

需要处理数据后展示

有时展示的时候需要处理一下数组的数据，但是不希望原来的数据改变，这时候可以使用 计算属性 对数据进行一个处理，然会给v-for 进行遍历。

例如：

<li v-for="n in evenNumbers" :key="n">{{ n }}</li>

data() {
  return {
    numbers: [ 1, 2, 3, 4, 5 ]
  }
},
computed: {
  evenNumbers() {
    return this.numbers.filter(number => number % 2 === 0)
  }
}

补充：

v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。

<div id="range" class="demo">
  <span v-for="n in 10" :key="n">{{ n }} </span>
</div>

不推荐 v-for 和 v-if 同时使用在同一个元素上。
在组件上使用 v-for 和普通元素上使用是一样的。
当涉及到给子组件传递数据的时候，需要使用到 props 接受数据。官方文档介绍（中文）

秀聚

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
6
评论
12.Vue列表渲染v-for标签的使用，数组更新时如何操作，组件上使用

v-for用法列表类型代替写法 in = of对象类型列表类型我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。v-for 还支持一个可选的第二个参数，即当前项的索引，支持形式(item, index) in items 。其中 item 是列表中的元素，index 是索引，items 是将要遍历的列表。<!DOCTYPE html>&l
复制链接

扫一扫