Vue2基础-Vue2中的条件渲染与列表渲染、列表过滤、列表排序（HTML版）

目录

• • 一、Vue中的条件渲染
  • 二、Vue中的列表渲染
  • • 1. v-for指令
    • 2. key的原理
    • 3. 列表过滤
    • 4. 列表排序

---

一、Vue中的条件渲染

1. v-if的基本使用

   • 写法：
     • v-if=“表达式”
     • v-else-if=“表达式”
     • v-else=“表达式”
   • 适用于：切换频率较低的场景。
   • 特点：不展示的DOM元素直接被移除。
   • 注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

2. v-show的基本使用

   • 写法：v-show=“表达式”
   • 适用于：切换频率较高的场景。
   • 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

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

	
		
		

			当前的n值是:{{n}}
			点我n+1
			
			{name}} -->
			{name}} -->

			
			{name}} -->
			{name}} -->

			
			

			
			
		
	

	

二、Vue中的列表渲染 1. v-for指令

• 用于展示列表数据
• 语法：v-for=“(item, index) in xxx” :key=“yyy”
• 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

	
		
		

			
			人员列表（遍历数组）
			

				

					{{p.name}}-{{p.age}}
				
			
	
			
			汽车信息（遍历对象）
			

				

					{{k}}-{{value}}
				
			
	
			
			测试遍历字符串（用得少）
			

				

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

				

					{{index}}-{{number}}
				
			
		
	
		
	

2. key的原理

面试题：react、vue中的key有什么作用？（key的内部原理）

1. 虚拟DOM中key的作用：
     key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

   对比规则：

   • 旧虚拟DOM中找到了与新虚拟DOM相同的key：

     1. 若虚拟DOM中内容没变, 直接使用之前的真实DOM！
     2. 若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

   • 旧虚拟DOM中未找到与新虚拟DOM相同的key

     1. 创建新的真实DOM。
     2. 渲染到到页面。

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

   1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
      会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

   2. 如果结构中还包含输入类的DOM：
      会产生错误DOM更新 ==> 界面有问题。

3. 开发中如何选择key?:

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

	
		
		

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

				

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

		
	

3. 列表过滤

核心代码依旧使用的是JavaScript中数组身上的filter()函数，此处使用了watch和computed两种方式实现了对列表展示的过滤。

	
		
		

			人员列表
			
			

				

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

		
	

4. 列表排序

列表排序的核心代码使用的是JavaScript中数组身上的sort()函数。

	
		
		

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

				

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

		
	

sort函数基本使用

let arr = [1,3,2,5,4,6]
arr.sort((a,b) => {
	return a-b // 升序 
	// return b-a // 降序
})

源代码出处：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通