vue学习笔记之：以对学生数据的处理作为示例实现数据过滤筛选等常规处理

示例：现有一组学生数据，通过对其中的数据筛选，获取其中的年龄最大、年龄最小、和年龄在指定区间内的学生数据

学生数据：

 [{'name': '张三', 'sex': '男', 'age': 15},
            {'name': '刘丽丽', 'sex': '女', 'age': 25},
            {'name': '李艳', 'sex': '女', 'age': 17},
            {'name': '王五', 'sex': '男', 'age': 35},
            {'name': '刘刚', 'sex': '男', 'age': 17},
            {'name': '李明明', 'sex': '男', 'age': 19}]

示例一：获取年龄小于18岁的学生

使用filter过滤出年龄大于18的所有学生数据，然后在页面上通过v-for指令循环获取即可，代码如下：

followEighteen: function () {
                // （1）列出所有小于18岁的同学的姓名和年龄
                return this.students.filter(a => a.age < 18);
            },

    

        

            姓名是：{{item.name}}
            性别是：{{item.sex}}
            年龄是：{{item.age}}
        
    

示例二：获取年龄最大和最小的学生信息

这个可以首先通过sort()方法对数组数据先进行排序，比如按照从小到大排序，然后页面上通过v-for指令循环时，最大的数据获取的是最后一个，最小的数据拿第一个即可，详细代码如下：

sortedAge: function () {
                // 输出年龄最小的同学的姓名和年龄
                return this.students.sort((a, b) => {
                    // 从小到大排序
                    return a.age - b.age
                })
            },

    

        

            姓名是：{{item.name}}
            性别是：{{item.sex}}
            年龄是：{{item.age}}
        
    
    
    

        

            姓名是：{{item.name}}
            性别是：{{item.sex}}
            年龄是：{{item.age}}
        
    

完整代码如下：

    
    
    



    
    

        

            姓名是：{{item.name}}
            性别是：{{item.sex}}
            年龄是：{{item.age}}
        
    
    
    

        

            姓名是：{{item.name}}
            性别是：{{item.sex}}
            年龄是：{{item.age}}
        
    
    
    

        

            姓名是：{{item.name}}
            性别是：{{item.sex}}
            年龄是：{{item.age}}
        
    
    
    
    

    
    

        

            姓名是：{{item.name}}
            性别是：{{item.sex}}
            年龄是：{{item.age}}