Vue列表过滤与数据原理

目录

列表过滤

使用计算属性

 使用watch监视属性

列表排序

Vue中数据原理

练习数据原理

 Vue中数据原理总结

---

列表过滤

可以进行模糊搜索

使用计算属性

    
    
    
    




    

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

运行结果

 使用watch监视属性

    
    
    
    




    {{error}}
    {{mess}}

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

运行结果

列表排序

    
    
    
    




    
年龄升序
年龄降序
原顺序
    

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

    现在是:{{sortName}}

 arrSort.sort((big,small)=>big-small是升序排序，反之则为降序

运行结果

Vue中数据原理

练习数据原理

    
    
    
    





    
学生信息
    学生姓名:{{student.name}}

    学生年龄:{{student.age}}

    学生性别:{{student.sex}}

    
学生爱好:
    

        

            {{h}}
        
    

    
朋友们:
    

        

            {{h.name}}-{{h.age}}
        
    


    点击年龄加1
    添加性别♀女
    切换为♂男
添加一个的朋友


改第一个朋友的名字
    添加一个游泳爱好
    修改第一个爱好为开车


    

 Vue中数据原理总结

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

2、如何监视对象中的数据？

• 通过setter实现监视，且要在new Vue时就传入要检测的数据。
• 对象中后追加的属性，Vue默认不作响应式处理（没有get set作为监视，vue检测不到数据的变化）

如需给后添加的属性做响应式，得使用vue提供的API：

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

• 第一个参数target是要添加目标位置，如vm._data.student
• 第二个参数propertyName是要添加的值或者如果前面的是数组，那这个就是索引，
• 第三个参数value是添加的值

3、如何监视数组中的数据？

通过包裹的数组跟心元素的方法实现，本质就是做了：

1. 调用原生对应的方法对数组进行更新
2. 重新解释模版，进而更新页面

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

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

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