【Vue.js】008-列表渲染

訾博ZiBo

发布于 2025-01-06 15:18:20

1.9K0

文章被收录于专栏：全栈开发工程师全栈开发工程师

最后更新：2021年1月16日14点43分

一、用 v-for 把一个数组对应为一组元素

1、概述

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

2021年1月16日14点43分

官方建议我们在使用v-for的时候，给对应的元素或组件添加上一个:key属性；

2、代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 简单使用 -->
			<ul id>
			  <li v-for="item in items" :key="item.message">
			    {{ item.message }}
			  </li>
			</ul>
			<!-- 访问父父作用域的属性，使用当前项索引 -->
			<ul id>
			  <li v-for="(item, index) in items">
			    {{ parentMessage }} - {{ index }} - {{ item.message }}
			  </li>
			</ul>
			<!-- 你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法 -->
			<ul id>
			  <li v-for="(item, index) of items">
			    {{ parentMessage }} - {{ index }} - {{ item.message }}
			  </li>
			</ul>
		</div>
		<script>
			var vue = new Vue({
				el: "#app", 
				data : {
					parentMessage : "Parent",
					items: [
					      { message: 'Foo' },
					      { message: 'Bar' }
					    ]
				}
			});
		</script>
	</body>
</html>

3、运行结果

二、在 v-for 里使用对象

1、概述

你也可以用 v-for 来遍历一个对象的属性；

2、代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 你也可以用 v-for 来遍历一个对象的 property -->
			<ul>
				<li v-for="value in object">
					{{ value }}
				</li>
			</ul>
			<!-- 你也可以提供第二个的参数为 property 名称 (也就是键名) -->
			<ul>
			  <li v-for="(name, value) in object">
			    {{ name }} : {{ value }}
			  </li>
			</ul>
			<!-- 还可以用第三个参数作为索引 -->
			<ul>
			  <li v-for="(name, value, index) in object">
			    {{ index }} : {{ name }} : {{ value }}
			  </li>
			</ul>
			<!-- 在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它
			的结果在不同的 JavaScript 引擎下都一致。 -->
		</div>
		<script>
			var vue = new Vue({
				el: "#app",
				data: {
					object: {
						title: 'How to do lists in Vue',
						author: 'Jane Doe',
						publishedAt: '2016-04-10'
					}
				}
			});
		</script>
	</body>
</html>

3、运行截图

三、维护状态

四、数组更新检测

1、变更方法

2、替换数组

五、显示过滤/排序后的结果

1、概述

有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际变更或重置原始数据。在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。

2、代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 使用计算属性 -->
			<li v-for="n in evenNumbers">
				{{ n }}
			</li>
			<!-- 使用一个方法 -->
			<ul v-for="set in sets">
				<li v-for="n in even(set)">
					{{ n }}
				</li>
			</ul>
		</div>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					numbers: [1, 2, 3, 4, 5],
					sets: [
						[1, 2, 3, 4, 5],
						[6, 7, 8, 9, 10]
					]
				},
				computed: {
					evenNumbers: function() {
						return this.numbers.filter(function(number) {
							return number % 2 === 0
						})
					},
				},
				methods: {
					even: function(numbers) {
						return numbers.filter(function(number) {
							return number % 2 === 0
						})
					}
				}
			});
		</script>
	</body>
</html>