Vue 列表渲染&数据更新

一. 基本使用

	
		
		
		
	
	
		
		
		

			
			
人员列表（遍历数组）
			

				

					{{p.name}}-{{p.age}}
				
			

			
			
汽车信息（遍历对象）
			

				

					{{k}}-{{value}}
				
			

			
			
测试遍历字符串（用得少）
			

				

					{{char}}-{{index}}
				
			
			
			
			
测试遍历指定次数（用得少）
			

				

					{{index}}-{{number}}
				
			
		

		

二. key的原理(尽量用唯一值, 如自增加id)

key选的不好, 容易导致排序等操作错乱

	
		
		
		
	
	
		
		
		

			
			
人员列表（遍历数组）
			添加一个老刘
			

				

					{{p.name}}-{{p.age}}
					
				
			
		

		

三.列表过滤

	
		
		
		
	
	
		
		

			
人员列表
			
			

				

					{{p.name}}-{{p.age}}-{{p.sex}}
				
			
		

		

四. 列表排序

	
		
		
		
	
	
		
		

			
人员列表
			
			年龄升序
			年龄降序
			原顺序
			

				

					{{p.name}}-{{p.age}}-{{p.sex}}
					
				
			
		

		

五.模拟vm的数据监测

六.Vue.set的使用

	
		
		
		
		
	
	
		
		

			
学校信息
			
学校名称：{{school.name}}
			
学校地址：{{school.address}}
			
校长是：{{school.leader}}
			

			
学生信息
			添加一个性别属性，默认值是男
			
姓名：{{student.name}}
			
性别：{{student.sex}}
			
年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}
			
朋友们
			

				

					{{f.name}}--{{f.age}}
				
			
		
	

	

七.监测总结

	
		
		
		
		
		
	
	
		
		
		

			
学生信息
			年龄+1岁 

			添加性别属性，默认值：男 

			修改性别 

			在列表首位添加一个朋友 

			修改第一个朋友的名字为：张三 

			添加一个爱好 

			修改第一个爱好为：开车 

			过滤掉爱好中的抽烟 

			
姓名：{{student.name}}
			
年龄：{{student.age}}
			
性别：{{student.sex}}
			
爱好：
			

				

					{{h}}
				
			
			
朋友们：
			

				

					{{f.name}}--{{f.age}}