Vue学习计划--Vue2（五）条件、列表渲染、表单数据

1. 条件渲染

1. v-if

   1. v-if=“表达式”
   2. v-else-if = “表达式”
   3. v-else = “表达式”
      适用于：切换频率较低的场景

   特点：不显示dom元素，直接被删除

   注意：v-if和v-else-if、v-else一起使用，但要求结构不能被打断
   v-if和template一起使用, v-show不可以

2. v-show v-show = “表达式” 适用于： 切换频率较高的场景 特点： 不展示dom元素，未被移除，仅仅是样式隐藏

3. 备注：使用v-if时，元素可能无法取到，v-show一定可以获取到

示例：

	
	
	
		
		
		
		
		
	
	
		

			
			
这是v-show文本
			
这是v-show文本
			

			
			
这是v-if文本
			
这是v-if文本
			

			
			点击if事件
			
			
	8:00
			
	9:00
			
	10:00
			
其他时间
			

			
			
	
			
			
				
		
		
	
	

2. 列表渲染

1. v-for
   1. 用于展示列表数据
   2. 语法：v-for=“(val, index) in arr” :key = yyy
   3. 可遍历：数组，对象，字符串（用的很少），指定次数（用的很少）
      示例：

	
	
	
		
		
		
		
		
	
	
		

			
			
人员列表
			

				

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

	
			
			

				

					{{ index }} - {{ v }}
				
			
			

	
			
			

				

					{{ index }} - {{ v }}
				
			
			

	
			
			

				

					{{ index }} - {{ v }}
				
			
		
		
	
	

2. key作用与原理

   1. 虚拟DOM中key的作用：
      1. key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，
      2. 随后Vue进行【新虚拟DOM】和【旧虚拟DOM】的差异比较，比较规则如下：
   2. 对比规则：
      1. 旧虚拟DOM中找到与新虚拟DOM相同的key:
         • 若虚拟DOM中的内容没有变，直接使用之前的真实DOM
         • 若虚拟DOM中的内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
      2. 旧虚拟DOM中未找到与新虚拟DOM相同的key：
         • 创建新的真实DOM，随后渲染到页面
           
           

3. 用index作为key可能会引发的问题：

   1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作：
      • 会产生没有必要的真实DOM更新 ==>界面效果没问题，但效率低
   2. 如果结构中还包含输入类的DOM：
      • 会产生错误的DOM更新，页面有问题

4. 开发中如何选择key:

   1. 最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号等唯一值
   2. 如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作，仅用于渲染列表用于展示，使用index作为key是没有问题的

示例：

	
	
	
		
		
		
		
		
	
	
		

			
			unshift添加person
			

				
				

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

3. 收集表单数据

1. 若：, 则v-model收集的是value值，用户输入的就是value值。
2. 若：, 则v-model收集的是value值，且要给标签配置value值。
3. 若：
   1. 没有配置input的value属性，v-model收集的就是checked(勾选 or 未勾选， 是布尔值)
   2. 配置input的value属性：
      • v-model 的初始值是非数组，那么收集的就是checked（勾选 or 未勾选， 是布尔值）
      • v-model 的初始值是数组，那么收集的就是value组成的数组
4. 备注：v-model的三个修饰符：
   1. lazy: 失去焦点再收集数据
   2. number: 输入字符串转为有效的数字
   3. trim: 输入首尾空格过滤

示例：

	
	
	
	  
	  
	  
	  
	  
	
	
	  

	    

	      
	      
	      
	      账号：1{{ obj.account }}2


	      密码： {{ obj.password }}


	      年龄： {{ typeof(obj.age) }}


	      性别：
	        男
	        女
	        {{ obj.sex }}


	      爱好：
	      
	        学习
	        打游戏
	        读书
	        {{ obj.hobby }}


	      家乡：
	        
	          请选择家乡
	          石家庄
	          邢台
	          邯郸
	          承德
	        
	        {{ obj.city }}
	        


	      其他信息：
	         {{ obj.other }}
	        


	       阅读并接受《用户协议》 {{ obj.argee }}
	      


	      提交