Vue2(笔记11) - Vue核心 - 列表过滤(watch 和 computed实现)、列表排序

列表过滤

需求：输入关键词，过滤列表信息

watch 方法实现

<div id="root">
    <h2>{{title}}</h2>
    <input type="text" placeholder="请输入名字" v-model="keywords">
    <ul>
        <li v-for="(p,index) in filPersons" :key="p.id">
            {{p.name}}-{{p.age}}-{{p.gender}}
        </li>
    </ul>
</div>

提示1：观察文本框，绑定双向数据“关键词”; 

提示2：操作关键词，返回列表数据；

提示3：不能操作原数组对象，否则过滤后的信息越来越少，要操作一个数组的副本；

new Vue({
    el: '#root',
    data: {
        title: '列表过滤',
        persons: [
            { id: "001", name: "马冬梅", age: 18, gender: "女" },
            { id: "002", name: "周冬雨", age: 19, gender: "女" },
            { id: "003", name: "周杰伦", age: 21, gender: "男" },
            { id: "004", name: "温兆伦", age: 22, gender: "男" },
        ],
        keywords: '',   // 定义要监视的关键词
        filPersons: []  // 创造一个数组的副本，用来过滤
    },
    watch: {
        keywords: {
            immediate: true,  // 使用 immediate 选项，强制 handler 初始化时执行
            handler(val) {    // handler 的特性是监视属性没变化就不执行
                this.filPersons = this.persons.filter((p) => {
                    return p.name.indexOf(val) !== -1
                })
            }
        }
    },
});

提示1：handler 函数过滤原数组后，返回一个过滤后的新数组，把新数组呈现在页面上；

提示2：immediate 选项，强制 handler 初始化执行一次，初始化 val 时为空，过滤后返回的就是原数组的所有内容；

看下效果：

computed 方法实现

<div id="root">
    <h2>{{title}}</h2>
    <input type="text" placeholder="请输入名字" v-model="keywords">
    <ul>
        <li v-for="(p,index) in filPersons" :key="p.id">
            {{p.name}}-{{p.age}}-{{p.gender}}
        </li>
    </ul>
</div>

提示1：模板不用变，只是 filPersons 从属性变成计算属性了；

new Vue({
    el: '#root',
    data: {
        title: '列表过滤',
        persons: [
            { id: "001", name: "马冬梅", age: 18, gender: "女" },
            { id: "002", name: "周冬雨", age: 19, gender: "女" },
            { id: "003", name: "周杰伦", age: 21, gender: "男" },
            { id: "004", name: "温兆伦", age: 22, gender: "男" },
        ],
        keywords: ''
    },
    computed:{ 
        filPersons(){  // 定义计算属性 filPersons
            return this.persons.filter((p)=>{
                return p.name.indexOf(this.keywords)!== -1
            })
        }
    }
});

提示1：过滤数组需要关键词，this.keywords 正是双向绑定的关键词，初始化时为空，为空会返回全部数组；

提示2：计算属性需要返回值，所以 return 一个新的过滤后的数组给 filPersons；

计算属性实现的代码更简洁；

注意：Vue devTools 中 computed 的变化跟上例监视属性创建的 filPersons 效果一样；

注意：虽然 computed 能实现的，watch 都能实现，仍优先使用 computed ，代码更简洁； 

列表排序

需求：输入关键词，过滤列表信息，同时还支持年龄排序

在上面 computed 方式实现的基础上修改下代码：

<div id="root">
    <h2>{{title}}</h2>
    <input type="text" placeholder="请输入名字" v-model="keywords"><br><br>
    <button @click="sortType = 2">年龄升序</button>
    <button @click="sortType = 1">年龄降序</button>
    <button @click="sortType = 0">原顺序</button>
    <ul>
        <li v-for="(p,index) in filPersons" :key="p.id">
            {{p.name}}-{{p.age}}-{{p.gender}}
        </li>
    </ul>
</div>

提示1：添加排序按钮，绑定点击事件，并设置排序关键词属性 sortType ;

提示2：绑定事件传递 sortType 的值，computed 依靠 sortType 值的变化来判断排序类型；

new Vue({
    el: '#root',
    data: {
        title: '列表过滤排序',
        persons: [
            { id: "001", name: "马冬梅", age: 18, gender: "女" },
            { id: "002", name: "周冬雨", age: 19, gender: "女" },
            { id: "003", name: "周杰伦", age: 21, gender: "男" },
            { id: "004", name: "温兆伦", age: 22, gender: "男" },
        ],
        keywords: '',
        sortType: 0     // 0 原顺序，1降序，2升序
    },
    computed: {
        filPersons() {
            const arr = this.persons.filter((p) => {  // 过滤的代码不变
                return p.name.indexOf(this.keywords) !== -1
            })
            if (this.sortType) {  // 根据排序关键词的值，重新排序
                arr.sort((p1, p2) => {
                    return this.sortType == 2 ? p1.age - p2.age : p2.age - p1.age
                })
            }
            return arr
        }
    }
});

提示1：过滤数组的代码不变，先取到过滤后的新数组，再对新数组排序；

提示2：sortType 就三个值，0，1，2；0 是原顺序，数组不变，可以直接返回，所以只判断 1 和 2；

提示3：根据 sortType 的值确定排序类型，​​arr.sort((a,b)=>{return a-b})​​ 数组排序基本功；

提示4：三目运算，根据 srotType 升序值2，来决定 a-b 或 b-a ，注意，比较的是年龄；

提示5：新数组 filPersons ，先经过了过滤，又经过了排序，最后要 return 出去；

看下效果：