Vue中如何实现列表渲染,排序,过滤操作

这篇文章主要为大家展示了"Vue中如何实现列表渲染,排序,过滤操作"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"Vue中如何实现列表渲染,排序,过滤操作"这篇文章吧。

1. 列表（渲染、排序、过滤）

1.1 条件渲染指令

有个小技巧：

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

性别：{{student.sex}}

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，例如：

v-if = "xxx"v-else = "xxx"---------------------v-if = "xxx"v-else-if = "xxx"v-else = "xxx"

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

template

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

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

 
        
当前n的值为：{{n}}
        点击我n加1            
你好啊！我是box1
             
你好啊！我是box1
                         
你好啊！box1
                    
我是box2
            
我是box2
                         
我是box2
                 
我是box31
           
我是box32
         
我是box33
         
hhhhhhh
                                        //当满足条件的时候只输出满足条件的值，例如本例子输出为 '我是box31'                       
    

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等等

1.2 列表过滤

使用computed

 
                
        
            
                {{value.name}} -- {{value.age}} -- {{value.gender}}            
        
    
    

使用watch

                
        
            
                {{value.name}} -- {{value.age}} -- {{value.gender}}            
        
    
    

1.3 列表排序

 
        
人员排序
                年龄升序        年龄降序        原顺序        
            
                {{val.name}} -- {{val.age}} -- {{val.gender}}             
        
    
    

以上是"Vue中如何实现列表渲染,排序,过滤操作"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！