Vue列表过滤和列表排序

👌准备了班级同学的学号姓名等相关数据，要如何把数据快速的放入表格中？

1. 首先在HTML结构中准备一个表格

2. 接着在Vue的data中放入一个数组对象，把所有同学的数据通过对象的方式放入其中

3. 最后在HTML结构中通过v-for列表渲染和使用插值语法去把数据展示在页面中

效果展示：

👌在这个基础上，想要通过输入框输入文字快速查找相应到的名字，要如何做？

1. 首先要准备一个input输入框
2. 其次在data中创建一个值为空字符串的属性与input中的value值通过v-model进行数据绑定
3. 最后通过数组中的filter函数，去过滤返回符合条件表达式的数组

效果展示：

👌展示的所有信息中，想要按照学号升序或者年龄降序的方式进行重新排序，要如何做？

1. 准备升序降序的按钮
2. 在data中定义一个属性
3. 通过事件处理去绑定按钮
4. 在计算属性中使用数组sort函数，去为原来的数据重新排序，再输出

效果展示：

 代码展示：

<div class="box">
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <table>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
            <tr v-for="(item,index) of filPerons" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.sex}}</td>
                <td>{{item.age}}</td>
            </tr>
        </table>
        <button @click="sortType = 0">原来顺序</button>
        <button @click="sortType = 1">年龄降序</button>
        <button @click="sortType = 2">学号升序</button>
</div>

    <script>
        Vue.config.productionTip = false,
            new Vue({
                el: '.box',
                data: {
                    keyWord: '',
                    sortType: 0, //1降序 2升序 0原顺序
                    persons: [{
                        id: '20223303',
                        name: '万旭川',
                        sex: '男',
                        age: 17

                    }, {
                        id: '20223305',
                        name: '王三',
                        sex: '男',
                        age: 19

                    }, {
                        id: '20223301',
                        name: '汪三成',
                        sex: '男',
                        age: 18

                    }, {
                        id: '20223302',
                        name: '王旭东',
                        sex: '男',
                        age: 22

                    }, {
                        id: '20223308',
                        name: '汪霜霜',
                        sex: '女',
                        age: 18

                    }, {
                        id: '20223304',
                        name: '孙新成',
                        sex: '男',
                        age: 20

                    }, {
                        id: '20223307',
                        name: '孙万东',
                        sex: '男',
                        age: 21

                    }, {
                        id: '20223306',
                        name: '万欣新',
                        sex: '女',
                        age: 20

                    }]
                },
                computed: {
                    filPerons() {
                        //filter函数是数组里的一个方法，主要起到过滤的作用，返回符合条件表达式的数组
                        const arr = this.persons.filter((item) => {
                                return item.name.indexOf(this.keyWord) !== -1
                            })
                            //判断一下是否需要排序
                        if (this.sortType) {
                            arr.sort((item1, item2) => {
                                return this.sortType === 1 ? item2.age - item1.age : item1.id - item2.id
                            })
                        }
                        return arr
                    }
                }
            })
    </script>

如果对你有帮助，请留下小心心！