Vue 列表过滤与排序的实现

目录

• 一、数据过滤
• watch实现
• computed 实现
• 二、列表排序
• 三、数据更新的一个问题
• 四、Vue.set 方法
• 五、Vue监视数据的原理
• 六、综合练习

一、数据过滤

watch实现

    
    
    



    
    
人员列表(遍历数组)
    
    

        

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

computed 实现

    
    
    



    
    
人员列表(遍历数组)
    
    

        

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

二、列表排序

    
    
    



    
    
人员列表(遍历数组)
    
    年龄升序
    年龄降序
    原顺序
    

        

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

三、数据更新的一个问题

首先演示更新时的一个问题，页面增加一个按钮，点击更新马冬梅的信息。先演示奏效的方法：

更新马冬梅信息
		methods:{
            updateMei(){
                this.persons[0].name = "马老师"
                this.persons[0].age = 50
                this.persons[0].sex = "男"
            }
        }

再演示不奏效的方法，修改方法：

		methods:{
            updateMei(){
                //不奏效
                this.persons[0]={id: 1, name: "马老师", age: 50, sex: "男"}
            }
        }

运行程序，点击页面按钮，数据是不发生变化的。

对数组修改时，只有调用数组的相关操作方法才能奏效，包括：

• push作用：在末尾添加元素
• pop作用：删除最后一个元素
• shift作用：删除第一个元素
• unshift作用：在首位添加元素
• splice作用：向/从数组添加/删除项目，并返回删除的项目
• sort作用：对数组的元素进行排序,并返回数组
• reverse作用：反转数组中元素的顺序

这样写就可以更新了

this.persons.splice(0,1,{id: 1, name: "马老师", age: 50, sex: "男"})

四、Vue.set 方法

    
个人信息
    
姓名：{{name}}
    
实际年龄：{{age.rAge}}
    
对外年龄：{{age.sAge}}
    
学校信息
    
学校名称：{{school.name}}
    
学校地址：{{school.address}}
    添加学校地址属性

但是 Vue.set 是有局限的，我们之前给 data 下的 school 增加了地址属性，但是我们不能给 data 直接增加属性

如果页面上有数组

    
    
    



  	...
    

        
{{h}}
    

    修改爱好

五、Vue监视数据的原理

1、vue 会监视 data 中所有层次的数据

2、如何监测对象中的数据?

通过 setter 实现监视，且要在 new Vue时就传入要监测的数据

• (1).对象中后追加的属性，Vue默认不做响应式处理
• (2).如需给后添加的属性做响应式，请使用如下API：

Vue.set(target. propertyName/index,value)或vm.$set(target.propertyName/index，value)

3、如何监测数组中的数据?

通过包裹数组更新元素的方法实现，本质就是做了两件事:

• (1).调用原生对应的方法对数组进行更新
• (2).重新解析模板进而更新页面

4、在 Vue 修改数组中的某个元素一定要用如下方法:

• (1).使用这些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
• (2).Vue.set()或vm.$set()

特别注意: Vue.set() 和vm. $set()不能给 vm 或 vm 的根数据对象添加属性!

六、综合练习

    
    
    



    
个人信息
    年龄+1
    添加性别属性，默认值：男
    修改性别
    
姓名：{{student.name}}
    
年龄：{{student.age}}
    
性别：{{student.sex}}
    


    添加一个爱好
    修改第一个爱好为：开车
    过滤掉爱好中的抽烟
    
爱好
    

        
{{h}}
    
    


    在列表首位添加一个朋友
    修改第一个朋友名字为：李四
    
朋友们
    

        
{{f.name}}--{{f.age}}
    

到此这篇关于Vue 列表过滤与排序的实现的文章就介绍到这了,更多相关Vue 列表过滤排序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！