【vue学习笔记】用监视属性watch和计算属性computed实现模糊查询以及排序

需要实现的功能：根据用户书的的内容显示相应的内容，模糊查询

一.模糊查询

1.用监视属性watch写

<!-- 模糊查询 -->
    <div class="root">
        <input type="text" placeholder="请输入姓名" v-model="name">
        <ul>
            <li v-for="(p, index) in filPerson" :key="person.id">
                {{p.name}}--{{p.age}}--{{p.sex}}
            </li>
        </ul>
    </div>

new Vue({
            el: '.root',
            data() {
                return {
                    name: '',
                    person: [
                        { id: 002, name: '周冬雨', age: 20, sex: '女' },
                        { id: 004, name: '周杰伦', age: 21, sex: '女' },
                        { id: 003, name: '温兆伦', age: 22, sex: '男' },
                        { id: 001, name: '马冬梅', age: 19, sex: '男' },
                    ],
                    filPerson: []
                }
            },
            watch: {
                // name(val){
                //     //filters 过滤过滤完后数组不受影响，因为filters会返回一个全新的数组
                //     this.filPerson = this.person.filter((p)=>{
                //         //return 后写的是你需要的条件
                //         return p.name.indexOf(val) !== -1
                //     })
                // }
                name: {
                    immediate: true,   //立即执行
                    handler(val) {
                        this.filPerson = this.person.filter((p) => {
                            //return 后写的是你需要的条件
                            return p.name.indexOf(val) !== -1
                        })
                    }
                }
            }
        })

2.用计算属性computed写

<!-- 模糊查询 -->
    <div class="root">
        <input type="text" placeholder="请输入姓名" v-model="name">
        <ul>
            <li v-for="(p, index) in filPerson" :key="person.id">
                {{p.name}}--{{p.age}}--{{p.sex}}
            </li>
        </ul>
    </div>

new Vue({
            el: '.root',
            data() {
                return {
                    name: '',
                    person: [
                        { id: 002, name: '周冬雨', age: 20, sex: '女' },
                        { id: 004, name: '周杰伦', age: 21, sex: '女' },
                        { id: 003, name: '温兆伦', age: 22, sex: '男' },
                        { id: 001, name: '马冬梅', age: 19, sex: '男' },
                    ]
                }
            },
            computed: {   //当computed和watch都可以写的时候，用computed会简单点
                filPerson() {
                    return this.person.filter((p) => {
                        return p.name.indexOf(this.name) !== -1
                    })
                }
            }
        })

二.模糊查询+排序

<!-- 模糊查询+排序 -->
    <div class="root">
        <input type="text" placeholder="请输入姓名" v-model="name">
        <button @click="sortType=0">原顺序</button>
        <button @click="sortType=1">年龄降序</button>
        <button @click="sortType=2">年龄升序</button>
        <ul>
            <li v-for="(p, index) in filPerson" :key="person.id">
                {{p.name}}--{{p.age}}--{{p.sex}}
            </li>
        </ul>

    </div>

new Vue({
            el: '.root',
            data() {
                return {
                    name: '',
                    sortType: 0, //0为原顺序  1降序 2升序
                    person: [
                        { id: 002, name: '周冬雨', age: 20, sex: '女' },
                        { id: 004, name: '周杰伦', age: 21, sex: '女' },
                        { id: 003, name: '温兆伦', age: 22, sex: '男' },
                        { id: 001, name: '马冬梅', age: 19, sex: '男' },
                    ]
                }
            },
            computed: {   //当computed和watch都可以写的时候，用computed会简单点
                filPerson() {
                    let arr = this.person.filter((p) => {
                        return p.name.indexOf(this.name) !== -1
                    })
                    //先判断是否需要排序
                    if (this.sortType) {
                        arr.sort((p1, p2) => {
                            return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
                        })

                    }
                    return arr;
                }
            }
        })

三.最终效果

1.模糊查询最终效果

2.排序最终效果
降序

升序

四.总结

在相同情况下，用计算属性computed写会简单点