【Vue.js】008-列表渲染

小鱼儿 2023-10-05 08:22 38阅读 0赞

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

# **目录** #

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

1、概述

2、代码演示

3、运行结果

二、在 v-for 里使用对象

1、概述

2、代码演示

3、运行截图

三、维护状态

四、数组更新检测

1、变更方法

2、替换数组

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

1、概述

2、代码演示

3、运行结果

六、在 v-for 里使用值范围

七、在 <template> 上使用 v-for上使用 v-for

八、v-for 与 v-if 一同使用

九、在组件上使用 v-for

--------------------

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

## 1、概述 ##

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

**2021年1月16日14点43分**

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70][]

## 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>
    			
    			<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、运行结果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1][]

# 二、在 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">
    			
    			<ul>
    				<li v-for="value in object">
    					{
       { value }}
    				</li>
    			</ul>
    			
    			<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>
    			
    		</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、运行截图 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2][]

# 三、维护状态 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4][]

# 四、数组更新检测 #

## 1、变更方法 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 5][]

## 2、替换数组 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 6][]

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

## 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>

## 3、运行结果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 7][]

# 六、在 v-for 里使用值范围 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 8][]

# 七、在 <template> 上使用 v-for #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 9][]

# 八、v-for 与 v-if 一同使用 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 10][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 11][]

# 九、在组件上使用 v-for #

见[https://cn.vuejs.org/v2/guide/list.html\#在组件上使用-v-for][https_cn.vuejs.org_v2_guide_list.html_-v-for]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210116144657837.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200814090532784.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200814091155183.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200814091507412.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200814091601656.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200814091722861.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200814100820563.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200814102921477.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200814103036889.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200814103225945.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200814103337715.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/2020081410340254.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[https_cn.vuejs.org_v2_guide_list.html_-v-for]: https://cn.vuejs.org/v2/guide/list.html#%E5%9C%A8%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-v-for