列表过滤

需要用到filter()方法，该方法返回数组中满足条件的元素组成的新数组，原数组不变。filter()的参数是一个回调函数 回调函数的返回值是布尔值，原数组有几个元素就调用几次回调函数，每调用一次回调函数当布尔值判定为true时，就把原数组当前元素放入新数组，当布尔值判定为false时，就过滤掉当前元素，不放入新数组。不写return就返回undefined，做布尔判定的结果是false。

watch方法实现，需要监听输入框中的值，根据输入框中的值去模糊匹配数组中有的元素，需要用数组的过滤方法

    <div id="app">
        <h2>专辑列表</h2>
        <input type="text" v-model="keyword">
        <ul>
            <li v-for="el in newarr" :key="newarr.id">{{el.title+"-"+el.singer+"-"+el.time}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                keyword:"",
                album:[
                    {id:1,title:"WonderLand",singer:"jessica",time:"2016-12-10"},
                    {id:2,title:"启示录",singer:"G.E.M.",time:"2022-08-09"},
                    {id:3,title:"Sketch",singer:"HyoMin",time:"2016-03-17"}
                ],
                newarr:[]
            },
            watch:{
                keyword:{
                    // 初始化就调用handler函数，因为此时输入框中没有输入任何东西输入框的值就是空字符串，
                    而一个字符串用indexOf查找会返回0，newarr就会得到album中的所有元素如此页面一开始才会有数据显示，
                    否则一开始newarr空数组不会渲染在页面上
                    immediate:true,
                    handler(val){
                        this.newarr=this.album.filter((el)=>{
                            return el.title.indexOf(val)!=-1;
                        })
                        console.log(this.newarr);
                    }
                }
            }
        })
    </script>

计算属性实现，利用数组过滤后的数组作为计算属性的返回值，计算属性中使用的数据就是输入框中的值

    <div id="app">
        <h2>专辑列表</h2>
        <input type="text" v-model="keyword">
        <ul>
            <li v-for="el in newarr" :key="newarr.id">{{el.title+"-"+el.singer+"-"+el.time}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                keyword: "",
                album: [
                    { id: 1, title: "WonderLand", singer: "jessica", time: "2016-12-10" },
                    { id: 2, title: "启示录", singer: "G.E.M.", time: "2022-08-09" },
                    { id: 3, title: "Sketch", singer: "HyoMin", time: "2016-03-17" }
                ]
            },
            computed: {
                newarr() {
                   return this.album.filter((el) => {
                        return el.title.indexOf(this.keyword) != -1;
                    })
                }
            }
        })
    </script>

列表排序

    <div id="app">
        <h2>专辑列表</h2>
        <input type="text" v-model="keyword">
        <button @click="sortType=1">发布时间升序</button>
        <button @click="sortType=2">发布时间降序</button>
        <button @click="sortType=0">发布时间原顺序</button>
        <ul>
            <li v-for="el in newarr" :key="newarr.id">{{el.title+"-"+el.singer+"-"+el.time}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                keyword: "",
                sortType: 0,// 0:原顺序，1：升序，2：降序
                album: [
                    { id: 1, title: "WonderLand", singer: "jessica", time: "6" },
                    { id: 2, title: "启示录", singer: "G.E.M.", time: "0" },
                    { id: 3, title: "Sketch", singer: "HyoMin", time: "6" }
                ]
            },
            computed: {
                newarr() {
                    let arr = this.album.filter((el) => {
                        return el.title.indexOf(this.keyword) != -1;
                    });
                    if (this.sortType != 0) {
                        if (this.sortType == 1) {
                            arr.sort((n1, n2) => {
                                return n1.time - n2.time
                            })
                            return arr;
                        } else if (this.sortType == 2) {
                                arr.sort((n1, n2) => {
                                    return n2.time - n1.time
                                })
                                return arr;
                            }
                        }else{
                            return arr;
                        }
                    }
                }
            })
    </script>