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函数，去为原来的数据重新排序，再输出

效果展示：

 代码展示：

        
        

            

                
学号
                
姓名
                
性别
                
年龄
            
            

                
{{item.id}}
                
{{item.name}}
                
{{item.sex}}
                
{{item.age}}
            
        
        原来顺序
        年龄降序
        学号升序

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