vue——列表过滤、列表排序、数据监测、vue.set

于 2021-08-20 18:07:07 发布
阅读量518 收藏
点赞数
分类专栏： javascript es6 Vue 文章标签： vue js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/h_jQuery/article/details/119829267
版权
列表过滤
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入人员名字" v-model="val">
        <ul>
            <!-- fPerson初始是没有值的，所以没输入之前人员列表没显示，用户体验不好 -->
            <li v-for="p in fPerson" :key="p.id">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el: "#root",
            data() {
                return {
                    val: '',
                    persons: [{
                        id: 001,
                        name: "张杰",
                        age: 24,
                        sex: '男'
                    }, {
                        id: 002,
                        name: "周杰伦",
                        age: 28,
                        sex: '男'
                    }, {
                        id: 003,
                        name: "马冬梅",
                        age: 20,
                        sex: '女'
                    }, {
                        id: 004,
                        name: "周六",
                        age: 26,
                        sex: '男'
                    }, {
                        id: 005,
                        name: "周冬雨",
                        age: 22,
                        sex: '女'
                    }, ],
                    fPerson: []
                }
            },
            // 当watch和computed都可以使用时，优先使用computed
            // watch方式
            //#region 
            /* watch: {
                // 简写
                val(val) {
                    // console.log(newVal);
                    // 过滤persons里面的每一项，返回一个数组，数组里存放的是符合条件的项，淘汰不符合的项，不会改变原数组
                    this.fPerson = this.persons.filter((p) => {
                        // p是persons的每一项
                        // 通过indexOf()查找p中的name值是否存在val，存在val则返回所在的索引值，不存在则返回-1
                        // return返回符合条件的项（name值存在val的p）
                        return p.name.indexOf(val) !== -1
                    })
                },
                val: {
                    // 在初始化的时候立即执行handler函数
                    immediate: true,
                    handler(val) {
                        this.fPerson = this.persons.filter((p) => {
                            // 因为：字符串.indexOf('')=0，所以在未输入值之前，val是空值，返回的是0，所以每一个p都可以都通过过滤，所以在未输入值之前人员列表可以显示
                            return p.name.indexOf(val) !== -1
                        })
                    }
                }
            } */
            //#endregion
            // computed
            computed: {
                fPerson() {
                    return this.persons.filter((p) => {
                        return p.name.indexOf(this.val) !== -1
                    })
                }
            }
        })
    </script>
</body>

</html>

列表排序

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>

    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入人员名字" v-model="val">
        <button @click="sortType=3">年龄升序</button>
        <button @click="sortType=1">年龄降序</button>
        <!-- <button @click="sortType=0">原顺序</button> -->
        <ul>
            <!-- fPerson初始是没有值的，所以没输入之前人员列表没显示，用户体验不好 -->
            <li v-for="p in fPerson" :key="p.id">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>

    </div>
    <script>
        new Vue({
            el: "#root",
            data() {
                return {
                    val: '',
                    sortType: 0, //0原顺序，1降序，2升序
                    persons: [{
                        id: 001,
                        name: "张杰",
                        age: 24,
                        sex: '男'
                    }, {
                        id: 002,
                        name: "周杰伦",
                        age: 28,
                        sex: '男'
                    }, {
                        id: 003,
                        name: "马冬梅",
                        age: 20,
                        sex: '女'
                    }, {
                        id: 004,
                        name: "周六",
                        age: 26,
                        sex: '男'
                    }, {
                        id: 005,
                        name: "周冬雨",
                        age: 22,
                        sex: '女'
                    }, ],
                }
            },
            computed: {
                fPerson() {
                    const arr = this.persons.filter((p) => {
                            return p.name.indexOf(this.val) !== -1
                        })
                        // 判断一下是否需要排序
                    if (this.sortType) {
                        arr.sort((p1, p2) => {
                            return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
                        })
                    }
                    return arr
                }
            }
        })
    </script>
</body>

</html>
模拟数据监测
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue监测数据改变</title>
</head>

<body>
    <script>
        let data = {
            name: '张三',
            age: 26
        };
        // Observer：构造函数，创建一个监视的实例对象,用于监视data中属性的变化
        const obj = new Observer(data);
        console.log(obj);
        // 监测数据改变依靠get和set
        function Observer(obj) {
            // 汇总对象中所有的属性形成一个数组
            const keys = Object.keys(obj);
            // 遍历
            keys.forEach(v => {
                Object.defineProperty(this, v, {
                    get() {
                        return obj[v]
                    },
                    set(val) {
                        obj[v] = val
                    }
                })
            })
        }
    </script>
</body>

</html>
vue.set()/vm.$set()
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <!-- data里面的数据是先进行加工处理，然后再存到vm._data里面，最后再通过getter/setter进行数据代理，放到vm上 -->
        <h2>学校信息</h2>
        <h5>学校名称：{{school.name}}</h5>
        <h4 v-if="school.leader">校长名称：{{school.leader}}</h4>
        <button @click='addLeader'>添加信息</button>
        <p>学生信息：</p>
        <p>姓名：{{student.name}},</p>
        <!-- 读取一个对象内一个不存在的属性，返回的是undefined，不会报错，vue不会把undefined显示到页面上 -->
        <p v-if="student.sex">性别：{{student.sex}}</p>
        <button @click="addSex">添加信息</button>
        <p>真实年龄：{{student.age.rAge}}，对外年龄：{{student.age.sAge}}</p>
        <p>朋友：</p>
        <ul>
            <li v-for="(v,i) in student.friends" :key="i">
                姓名:{{v.name}}，年龄：{{v.age}}
            </li>
        </ul>

        <!-- Vue.set(target,'key',value):target目标属性，往谁身上追属性；key要添加的属性名；value要添加的属性值 -->
        <!-- Vue.set(vm._data.student,'sex','男')=== Vue.set(vm.student,'sex','男')-->
        <!-- vm.$set(target,'key',value)：用法跟 Vue.set()一致 -->
        <!-- vm.$set(vm._data.student,'sex','男')=== vm.$set(vm.student,'sex','男') -->
        <!-- 这个target不可以是vue实例（vm），也不可以是vue实例的根数据（data的直接属性或者vm的_data），而是data里面的某个对象的某个属性 -->
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                school: {
                    name: 'xshxy',
                },
                student: {
                    name: 'zs',
                    age: {
                        rAge: 40,
                        sAge: 35
                    },
                    friends: [{
                        name: 'jerry',
                        age: 35
                    }, {
                        name: 'tony',
                        age: 36
                    }]
                }
            },
            methods: {
                addSex() {
                    // Vue.set(this.student, 'sex', '男')
                    this.$set(this.student, 'sex', '男')
                },
                addLeader() {
                    this.$set(this.school, 'leader', '张三')
                }
                //删除属性
                delName(){
					this.$delete(this.school,'name')
				}
            },
        })
    </script>
</body>

</html>

数组数据更新

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2>人员列表</h2>
        <button @click="update">更新信息</button>
        <ul>
            <li v-for="p in persons" :key="p.id">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>

    </div>
    <script>
        const vm = new Vue({
            el: "#root",
            data() {
                return {
                    persons: [{
                        id: 001,
                        name: "张杰",
                        age: 24,
                        sex: '男'
                    }, {
                        id: 002,
                        name: "周杰伦",
                        age: 28,
                        sex: '男'
                    }, {
                        id: 003,
                        name: "马冬梅",
                        age: 20,
                        sex: '女'
                    }, {
                        id: 004,
                        name: "周六",
                        age: 26,
                        sex: '男'
                    }, {
                        id: 005,
                        name: "周冬雨",
                        age: 22,
                        sex: '女'
                    }, ],
                }
            },
            methods: {
                update() {
                    // 添加无效，数据改变了，但是vue监测不到，页面数据不改变
                    /* this.persons[1] = {
                        id: 002,
                        name: "周杰伦001",
                        age: 20,
                        sex: '男'
                    } */
                    this.persons.splice(1, 1, {
                        id: 002,
                        name: "周杰伦001",
                        age: 20,
                        sex: '男'
                    })
                }
            },
        })
    </script>
</body>

</html>

监测数据——数组

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h3>个人信息：</h3>
        <p>姓名：{{name}}</p>
        <p>年龄：{{age}}</p>
        <p>性别：{{sex}}</p>
        <p>爱好：</p>
        <ul>
            <li v-for="(v,i) in hobby" :key="i">
                {{v}}
            </li>
        </ul>
        <button @click="addHobby">添加爱好</button>
    </div>
    <!-- vue不能监测到直接通过索引值来修改数组中的数据，数据是改变了，但是vue监测不到，所以页面也没有变化 -->
    <!-- 通过push/pop/unshift/shift/splice/sort/reverse来操作数组，vue是可以监测到的，页面也会显示 -->
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                name: "张三",
                age: 29,
                sex: '男',
                hobby: [
                    '睡觉', '吃', '打代码', '耍手机'
                ]
            },
            methods: {
                addHobby() {
                    this.hobby.push('看电影');
                    // 用set也可以
                    /* 控制台：
                    vm._data.hobby.push('看电影')==vm.hobby.push('看电影') 
                    Vue.set(vm._data.hobby,0,'玩游戏')===Vue.set(vm.hobby,0,'玩游戏')
                    vm.$set(vm._data.hobby,0,'玩游戏')===vm.$set(vm.hobby,0,'玩游戏')
                    */

                }
            },
        })
    </script>
</body>

</html>

Vue监视数据的原理：

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

​ 2.如何监测对象中的数据？

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

​ 2.1 对象中后追加的属性，Vue默认不做响应式处理（数据改变了，但是页面不跟着改变）

​ 2.2 如需给后添加的属性做响应式，请使用以下的API：

Vue.set(target,propertyName/index,value)或
vm.$set(target,propertyName/index,value)
//propertyName是对象的属性名；index是数组的索引

​ 3.如何监测数组中的数据？

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

​ 3.1调用原生对应的方法对数组进行更新

​ 3.2重新解析模板，进而更新页面

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

1. push/pop/unshift/shift/splice/sort/reverse
2. Vue.set()或vm.$set()

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <p>操作：</p>
        <button @click="addAge">年龄+1</button>
        <button @click="addSex">添加性别属性：默认男</button>
        <button @click="student.sex='未知'">修改性别</button>
        <button @click="addFri">在列表首位添加一个朋友</button>
        <button @click="editName">修改第一个朋友的信息为：张三，28</button>
        <button @click="addHobby">添加一个爱好</button>
        <button @click="editHobby">修改第一个爱好为：开车</button>

        <h1>学生信息</h1>
        <p>姓名：{{student.name}}</p>
        <p>年龄：{{student.age}}</p>
        <p v-if="student.sex">性别：{{student.sex}}</p>
        <p>爱好：</p>
        <ul>
            <li v-for="(v,i) in student.hobby" :key="i">{{v}}</li>
        </ul>
        <p>朋友们</p>
        <ul>
            <li v-for="(v,i) in student.friends" :key="i">姓名：{{v.name}}——年龄：{{v.age}}</li>
        </ul>


    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                student: {
                    name: 'tom',
                    age: 20,
                    hobby: ['吃饭', '睡觉', '打代码', '看小说'],
                    friends: [{
                        name: 'jerry',
                        age: 35
                    }, {
                        name: 'tony',
                        age: 36
                    }]
                }
            },
            methods: {
                addAge() {
                    this.student.age++
                },
                addSex() {
                    // 添加无效，vue监测不到该数据，但是vm._data里面存在了，页面数据还是旧的
                    // this.student.sex='男'

                    this.$set(this.student, 'sex', '男');
                    // vue.set(this.student, 'sex', '男')
                },
                addFri() {
                    this.student.friends.unshift({
                        name: 'jack',
                        age: 33
                    })
                },
                editName() {
                    // 因为该对象的属性有对应的get和set
                    this.student.friends[0].name = '张三';
                    this.student.friends[0].age = 28;
                },
                addHobby() {
                    // this.student.hobby.push('耍手机')
                    this.$set(this.student.hobby, 4, '耍手机')
                },
                editHobby() {
                    // 通过索引值修改数组的值无效
                    // this.student.hobby[0] = '开车'
                    // 修改从索引为0的数据，修改数量为1个，替换的信息是开车
                    // this.student.hobby.splice(0, 1, '开车')
                    // Vue.set(this.student.hobby, 0, '开车')
                    this.$set(this.student.hobby, 0, '开车')

                }
            },
        })
    </script>
</body>

</html>

数据劫持：将data中的属性遍历一遍，处理之后，变成getter/setter形式，将这种行为/操作称为劫持

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值