欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue的列表之渲染,排序,过滤详解

程序员文章站 2024-03-26 16:35:29
1. 列表(渲染、排序、过滤)1.1 条件渲染指令有个小技巧:​如果是查找对象中不存在的属性,返回的是一个undefined,利用这一个点不管是v-show或者是v-if,如果值等于undefined...

1. 列表(渲染、排序、过滤)

1.1 条件渲染指令

有个小技巧:

​ 如果是查找对象中不存在的属性,返回的是一个undefined,利用这一个点不管是v-show或者是v-if,如果值等于undefined的就不显示,假设sex属性不存在

<p v-show="student.sex">性别:{{student.sex}}</p>

1.1.1 v-show

1.v-show的原理:通过display:none 对元素进行隐藏,当满足条件时去除display:none这个样式

2.适用的场景是:切换频率较高的场景

3.在使用v-show隐藏元素的时候是可以获取得到元素的,而v-if 是无法获取到元素的

1.1.2 v-if

1.v-if的原理:将整个节点移除,满足条件时添加节点

2.v-else、v-else-if 需要配合v-if去使用,但是结构不能被破坏

必须要先写v-if,例如:

适用的场景:切换频率比较低的场景

template

最大的特点就是不破坏结构但是只能与 v-if 进行配合使用

1.1.3 v-if和v-show的小案例

1.1.4 v-for(key的原理)

特点:

1.可以遍历数组

2.可以遍历对象

3.可以遍历字符串

4.可以遍历次数(用的很少)

5.如果我们不写key,默认使用index

作用:用于展示列表的数据

语法v-for = "(item,index) in xxx" :key= "yyy"

key的原理:(很重要)

1.虚拟dom中key的作用:

key是虚拟dom对象的标识,当数据发生变化时,vue会根据【新数据】生成【新的虚拟dom】, 随后vue进行【新虚拟dom】与【旧虚拟dom】的差异比较,比较规则如下:

(1). 旧虚拟dom中找到了与新虚拟dom相同的key

①若虚拟dom中内容没变, 直接使用之前的真实dom

②若虚拟dom中内容变了, 则生成新的真实dom,随后替换掉页面中之前的真实dom

(2). 旧虚拟dom中未找到与新虚拟dom相同的key直接创建新的真实dom,随后渲染到到页面。

2.如果使用index作为key会引发以下的问题:

(1)如果发生逆序添加、逆序删除破坏了顺序操作就会产生没有必要的dom更新而会造成达不到效果的问题

(2)如果输入结构包括了输入类的dom元素,会产生更新问题比如:input的框的数据对不上等等

3.所以在开发的过程中key的使用最好是使用唯一能够标识的值作为key,比如id,date.now(),nanoid这个包npm i nanoid等等

Vue的列表之渲染,排序,过滤详解

Vue的列表之渲染,排序,过滤详解

1.2 列表过滤

使用computed

使用watch

1.3 列表排序

总结

以上就是今天要讲的内容,本文介绍了和列表(渲染、排序、过滤)相关的知识,希望对大家有所帮助!