Vue系列学习笔记(五)列表渲染

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

<div id="app-1">
	<ul>
		<li v-for="item in items">
			{{item.message}
		</li>
	</ul>
</div>

new Vue({
	el:"#app-1",
	data:{
		items:[
			{message:"Hello"},
			{message:"Wrold"}
		]	
	}
	
})

效果图：

• Hello
• World

在 v-for块中，我们可以访问所有父作用域的属性。v-for还支持一个可选的第二个参数，即当前项的索引。

<div id="app-1">
	<ul>
		<li v-for="(item,index) in items">
			{{parentMessage}}-{{index}}-{{item.message}
		</li>
	</ul>
</div>

new Vue({
	el:"#app-1",
	data:{
		items:[
			{message:"Hello"},
			{message:"Wrold"}
		],
		parentMessage:"ParentMessage"
	}

效果图：

• ParentMessage-0-Hello
• ParentMessage-1-World

2. 在v-for中使用对象

<div id="#app-2">

	<ul>
		<li v-for="value in object">
			{{value}}
		</li>
	<ul>
</div>

new Vue({
	el:"#app-2",
	data:{
		object:{
			id:1,
			name:"张三",
			age:12	
		}
	}
})

效果图：

• 1
• 张三
• 12

你也可以提供第二个的参数为 property 名称 (也就是键名)和索引：

<div id="#app-2">

	<ul>
		<li v-for="(value,name,index) in object">
			{{index}}.{{name}}:{{value}}
		</li>
	<ul>
</div>

new Vue({
	el:"#app-2",
	data:{
		object:{
			id:1,
			name:"张三",
			age:12	
		}
	}
})

效果图：

• 0.id:1
• 1.name:张三
• 2.age:12

3.v-for和key使用

请访问上一节https://blog.csdn.net/qq_35953966/article/details/104431324#vif_vs_vfor_249

4. 数组更新检测

4.1 变异方法

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

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

使用如下：

<div id="app-1">
			<ul>
				<li v-for="(item,index) in items">
					{{parentMessage}}-{{index}}-{{item.message}}
				</li>
			</ul>
			<button @click="pushEvent">pushEvent</button>
			<button @click="popEvent">popEvent</button>
			<button @click="shiftEvent">shiftEvent</button>
			<button @click="unshiftEvent">unshiftEvent</button>
			<button @click="spliceEvent">spliceEvent</button>
			<button @click="sortEvent">sortEvent</button>
			<button @click="reverseEvent">reverseEvent</button>	
		</div>


var app1=new Vue({
			el:"#app-1",
			data:{
				items:[
					{
						message:"Hello"
					},
					{
						message:"World"
					}
				],
				parentMessage:"parent"
			},
			methods:{
			
				pushEvent:function(){
					//向数组的末尾添加一个或更多元素，并返回新的长度。
					var result=this.items.push({message:"click push"})
					console.log("push -->"+result)
					
				},
				popEvent:function(){
					//删除数组的最后一个元素并返回删除的元素。
					var result=this.items.pop()
					console.log("pop -->"+result)
				},
				shiftEvent:function(){
					//删除并返回数组的第一个元素。
					var result=this.items.shift()
					console.log("shift -->"+result)
				},
				unshiftEvent:function(){
					//向数组的开头添加一个或更多元素，并返回新的长度。
					var result=this.items.unshift({message:"click unshift"})
				},
				spliceEvent:function(){
					//从数组中添加或删除元素。
					var result=this.items.splice(1,0,{message:"click splice"})
					console.log(result)
				},
				sortEvent:function(){
					//对数组的元素进行排序。
					var result=this.items.sort()
					console.log(result)
				},
				reverseEvent:function(){
					//	反转数组的元素顺序。
					var result=this.items.reverse();
					console.log(result)
				}
			}
		})

变异方法和非变异方法的具体使用https://www.runoob.com/jsref/jsref-obj-array.html

4.2 非变异方法

• filter()
• concat()
• slice()

列举其中的一个使用，具体api请访问上面的链接：

<div id="app-1">
			<ul>
				<li v-for="(item,index) in items">
					{{parentMessage}}-{{index}}-{{item.message}}
				</li>
			</ul>
			<button @click="filterEvent">filterEvent</button>
		</div>

		new Vue({
			el:"#app-1",
			data:{
				items:[
					{
						message:"Hello"
					},
					{
						message:"World"
					}
				],
				parentMessage:"parent"
			},
			methods{
				filterEvent:function(){
					this.items=this.items.filter(function(obj){
						return obj.message.match("Hello")
						
					})
				}
			}
		

4.3 注意事项

由于 JavaScript 的限制，Vue 不能检测以下数组的变动：

1.当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
2.当你修改数组的长度时，例如：vm.items.length = newLength

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

为了解决第一类问题，以下两种方式都可以实现 vm.items[indexOfItem] = newValue 和vm.items.length = newLength相同的效果，同时也将在响应式系统内触发状态更新：

<div id="app-5">
			<ul>
				<li v-for="item in items">
					{{item}}
				</li>
			</ul>
			
    		<button @click="setEvent">setEvent</button>
		</div>

	new Vue({
			el:"#app-5",
			data:{
				items:["Banana", "Orange", "Apple", "Mango"]
			},
			methods:{
				setEvent:function(){
					//第一种方式利用索引直接设置一个数组项
					this.$set(this.items,this.items.indexOf("Apple"),"Watermelon")	
				},
				spliceEvent:function(){
					//第二种方式修改数组的长度
					this.items.splice(2)
				}
			}
		})

5. 对象变更注意事项

还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：

var app3=new Vue({
			el:"#app-3",
			data:{
				userProfile:{
					name:"Tom"
				}
			}
		})
		// `vm.name` 现在是响应式的

		vm.jerry= "jerry"
		// `vm.jerry` 不是响应式的

对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, propertyName, value)方法向嵌套对象添加响应式属性。例如，对于：

<div id="app-3">
			<p v-for="value in userProfile">{{value}}</p>
			<button @click="addUserEvent">addUserEvent</button>
		</div>

	var app3=new Vue({
			el:"#app-3",
			data:{
				userProfile:{
					name:"Tom"
				}
			},
			methods:{
				addUserEvent:function(){
					this.$set(this.userProfile,"age","12")
				}
			}
		})

当你需要为已有对象赋值多个新属性，可以使用Object.assign() 或_.extend()。

<div id="app-3">
			<p v-for="value in userProfile">{{value}}</p>
			<button @click="addUserEvent">addUserEvent</button>
		</div>

	var app3=new Vue({
			el:"#app-3",
			data:{
				userProfile:{
					name:"Tom"
				}
			},
			methods:{
				addUserEvent:function(){
					this.userProfile=Object.assign({},app3.userProfile,{
						age:12,
						sex:"男"
					})
					console.log(this.userProfile)
				}
			}
		})

Object.assign的具体使用请点击访问

6. 显示过滤/排序后的结果

6.1 过滤

<div id="app-6">
			<ul>
				<li v-for="num in eventNumbers">{{num}}</li>
			</ul>
		</div>

	new Vue({
			el:"#app-6",
			data:{
				numbers:[1,2,3,4,5,6]
			},
			computed:{
				eventNumbers:function(){
					//过滤出2的倍数
					return this.numbers.filter(function(number){
						return number%2==0
					})
				}
			}
		})

结果：

• 2
• 4
• 6

上面还可以如下这么写效果一样

<div id="app-7">
			<ul>
				<li v-for="num in event(numbers)">{{num}}</li>
			</ul>
		</div>


	new Vue({
			el:"#app-7",
			data:{
				numbers:[1,2,3,4,5,6]
			},
			methods:{
				event:function(numbers){
					return this.numbers.filter(function(number){
						return number%2==0
					})
					
					
				}
			}
		})

6.2 排序

div id="app-6">
			<ul>
				<li v-for="num in numbers">{{num}}</li>
				<button @click="sortNumbers">排序</button>
			</ul>
		</div>

	new Vue({
			el:"#app-6",
			data:{
				numbers:[6,1,4,3,5,2]
			},
			methods:{
				sortNumbers:function(){
					//sort是变异方法，因此对number修改了Vue会立即更新视图
					this.numbers.sort()
				}
			}
		})

7. 在v-for里使用范围

<div id="app-8">
			<div>
  				<span v-for="n in 10">{{ n }} </span>
			</div>
		</div>

new Vue({
	el:"#app-8"
})

结果:
1 2 3 4 5 6 7 8 9 10

8. v-for与v-if一同使用

点击访问该博客