vue.js基础（2）

Vue指令之v-for和key属性

循环数组，循环对象和循环数组中的对象

	
		
		
		
		
		
	

	
		

			
			

				v-for循环数组
			
			
每一项：{{item}}------索引值：{{i}}
			
			
			


			

				v-for循环对象
			
			
值：{{user}}------键：{{key}} ------索引：{{i}}
			
			
			
			
			

				v-for循环数组中的对象
			
			
名字：{{user1.name}}------年龄：{{user1.age}} ------索引：{{i}}
			
			
			
			
			

				v-for循环数字
			
			
数字：{{user2}}------索引：{{i}}
		
		
	

在2.20+版本里，当在组件中使用v-for时，key现在是必须的

当vue.js用v-for正在更新已渲染过的元素列表时，它默认用‘就地复用’策略。如果数据项的顺序被改变，Vue将不是移动DOM元素来匹配数据项的顺序，而是简单复用此处每一个元素，并且确保它在特定索引下显示已被渲染过的每一个元素。为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一key属性。

    
    
    
    
    



    

		ID:
		
		
		Name:
		
		
		
		
		
		
		
		

			{{item.id}}---姓名：{{item.name}}
	
    

Vue指令之v-if和v-show

一般来说，v-if有更高的切换消耗而v-show有更高的初始渲染消耗。因此，如果需要频繁切换v-show较好，如果在运行时条件不大可能改变v-if较好

    
    
    
    
    



    

		
		
		
		
		
		
		
		
		
		
		
我是一个v-if
		
我是v-show
	
    

品牌案例

	
		
		
		
		
		
		

	

	
		

			

				

					
添加品牌
				
				

					Id:
						
					
					Name:
						
					
					
					
					搜索关键字:
						
					
				
			
			

				

					

						
Id
						
Name
						
Ctime
						
operation
					
				
				

					
					
					
					

						
{{item.id}}
						
{{item.name}}
						
						
{{item.Ctime |dataFormat()}}
						

							刪除
						
					
				
			
		




		

			
{{dt|dataFormat()}}
		
		
	

过滤器的基本使用

	
		
		
		
		
		
	

	
		

			

				{{msg | msgFormat('疯狂6+1','123')}}
			
		
		
	

vue调试工具vue-devtools

在Chrome应用商店插件里面使用