前端相关|02-Vue基础之条件渲染和列表渲染 javascript|前端|vue.js

文章目录

- 01.条件渲染
- - 1.1.v-if 使用场景
  - 1.2.v-show使用场景
- 02.列表渲染
- - 2.1.v-for的基本使用
  - 2.2.v-for遍历时key的选择问题

01.条件渲染 Vue中的条件渲染指的是，我们可以在视图中选择性的显示一些内容，条件渲染的可以使用以下两种指令来实现：

v-if：
- 特点：不展示的DOM元素直接被移除，即动态的向DOM树内添加或者删除DOM元素，注意，不是隐藏是销毁删除。
- 适用于：切换频率较低的场景。
- 注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被打断。
v-show
- 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉，本质就是控制标签的display属性，来实现对标签的隐藏和显示，并且只编译一次。
- 适用于：切换频率较高的场景。
- 写法：v-show="表达式"

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

条件渲染 v-if - 锐客网 type="text/javascript" src="https://www.it610.com/js/vue.js"> 当前的n值是:{{n}} 欢迎你 {{name}} 欢迎你 {{name}}Angular React Vue 哈哈 type="text/javascript"> const vm = new Vue({ el:'#root', data:{ name:'AISMALL', n:0 } })

1.2.v-show使用场景

条件渲染 v-show - 锐客网 type="text/javascript" src="https://www.it610.com/js/vue.js"> 当前的n值是:{{n}} 欢迎你 {{name}} 欢迎你 {{name}} type="text/javascript"> const vm = new Vue({ el:'#root', data:{ name:'AISMALL', n:0 } })

02.列表渲染 Vue中的条件渲染指的是，获取列表中的各种数据，并将它展示出来，列表渲染一般使用v-for指令来实现，根据遍历数据（数组、对象、字符串、指定次数）的不同可进行分类：
v-for遍历数组 ：

方式一：
{{item}}

语法解析：
- item：为标签内要填充的内容
- in：关键字
- list：待遍历的数组
方式二：
{{item}} + '---' +{{index}}

【前端相关|02-Vue基础之条件渲染和列表渲染】语法解析：
- item：为标签内要填充的内容
- index：数组的索引
- in：关键字
- list：待遍历的数组
注意：key的作用是帮助Vue区分不同的元素，从而提高性能

v-for遍历对象：

方式一：
语法解析：
- value：对象的value
- key：代表对象的键
方式二：
语法解析：
- value：对象的value
- key：代表对象的键
- index：代表索引
注意：不推荐同时使用v-if和v-for，当v-if与v-for一起使用时，v-for具有比v-if更高的优先级。

举个例子：
2.1.v-for的基本使用

使用v-for指令遍历数组、对象、字符串（用的很少）、指定次数（用的很少）。

列表渲染 - 锐客网 type="text/javascript" src="https://www.it610.com/js/vue.js"> 人员列表（遍历数组） {{p.name}}-{{p.age}} 汽车信息（遍历对象） {{k}}-{{value}} 测试遍历字符串（用得少） {{char}}-{{index}} 测试遍历指定次数（用得少） {{index}}-{{number}} type="text/javascript"> new Vue({ el:'#root', data:{ persons:[ {id:'001',name:'张三',age:18}, {id:'002',name:'李四',age:19}, {id:'003',name:'王五',age:20} ], car:{ name:'奥迪A8', price:'70万', color:'黑色' }, str:'hello' } })

2.2.v-for遍历时key的选择问题
问题1：react、vue中的key有什么作用？（key的内部原理）

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

1、旧虚拟DOM中找到了与新虚拟DOM相同的key： - 若虚拟DOM中内容没变, 直接使用之前的真实DOM！ - 若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。2、旧虚拟DOM中未找到与新虚拟DOM相同的key - 创建新的真实DOM，随后渲染到到页面。
key的原理 - 锐客网 type="text/javascript" src="https://www.it610.com/js/vue.js"> 人员列表（遍历数组） {{p.name}}-{{p.age}}-{{index}} type="text/javascript"> new Vue({ el:'#root', data:{ persons:[ {id:'001',name:'张三',age:18}, {id:'002',name:'李四',age:19}, {id:'003',name:'王五',age:20} ] }, methods: { add(){ const p = {id:'004',name:'老刘',age:40} this.persons.unshift(p) } }, })

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

1、若对数据进行逆序添加、逆序删除等破坏顺序操作，会产生没有必要的真实DOM更新（界面没问题），效率低。
2、如果结构中还包含输入类的DOM，会产生错误DOM更新 （界面有问题）。
key的原理 - 锐客网 type="text/javascript" src="https://www.it610.com/js/vue.js"> 使用默认的index作为key 人员列表（遍历数组）：先在输入框中输入值，然后再点击添加按钮 {{p.name}}-{{p.age}}-{{index}} type="text/javascript"> new Vue({ el:'#root', data:{ persons:[ {id:'001',name:'张三',age:18}, {id:'002',name:'李四',age:19}, {id:'003',name:'王五',age:20} ] }, methods: { add(){ const p = {id:'004',name:'老刘',age:40} this.persons.unshift(p) } }, })

问题3：开发中如何选择key?

1、最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
2、如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
key的原理 - 锐客网 type="text/javascript" src="https://www.it610.com/js/vue.js"> 唯一标识作为key：人员ID 人员列表（遍历数组）：先在输入框中输入值，然后再点击添加按钮 {{p.name}}-{{p.age}}-{{index}} type="text/javascript"> new Vue({ el:'#root', data:{ persons:[ {id:'001',name:'张三',age:18}, {id:'002',name:'李四',age:19}, {id:'003',name:'王五',age:20} ] }, methods: { add(){ const p = {id:'004',name:'老刘',age:40} this.persons.unshift(p) } }, })