Vue——条件渲染

v-if、v-else-if、v-else

1. v-if 指令用于条件性地渲染一块内容，表达式的值为

   • true ——渲染。
   • false——不渲染

2. v-if、v-else-if、v-else可以形成判断链联用

   
   			
   A
   			
   B
   			
   C
   			
   D
   			
   NOT A/B/C
   

   数据：

   data:{
   		type:"Y",
   	 }
   结果打印：
   NOT A/B/C
   
   data:{
   		type:"B",
   	 }
   结果打印：
   B
   

   key管理可复用的元素

   背景：

   1. 因为从性能方向考虑，Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染
   2. 但是很多场景我们想让Vue去区分开这些相同类型的参数，所以我们采用key去标识，让Vue能够区分

? Vue的渲染机制：

当我们在切换填写内容时，输入框里的内容没有变，这就是因为Vue复用了原有的input框，没有对这两个input框做区分，现在我们通过key来标记区分

应用场景：

1. 表单填写，如上述示例
2. 循环元素时对元素进行不复用标记(与v-for联用)

v-for 循环元素

应用范围：

• 循环数组
• 循环对象
• 循环json

		

			
		     

		        
{{index}}-{{item}}
		     
			 
			 
			 

			     
{{item}}
			 
			 
			 
			 

			 	

					
姓名
					
年纪
					
性别
				
			 	

					
{{item.name}}
					
{{item.age}}
				    
{{item.sex}}
				
			 

		    
		    
	

结果如图：

注意：

1. v-for遍历的出来的不是数据，而是元素
2. 如果使用item和index的时候一定要使用括号包裹起来

v-show

用于元素的显示/隐藏，当表达式为false时渲染的属性为display：none

Hello!

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

注意，v-show 不支持