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

最新推荐文章于 2023-03-14 18:47:14 发布

枫林血舞

最新推荐文章于 2023-03-14 18:47:14 发布

阅读量611

点赞数

分类专栏：前端 vue 文章标签： vue 数据过滤排序筛选

本文链接：https://blog.csdn.net/guxuhua123_01/article/details/102585072

版权

本文以学生数据为例，介绍如何在Vue中实现数据的过滤筛选和排序。通过filter方法筛选出年龄小于18岁的学生，利用sort方法对年龄进行排序，从而获取年龄最大和最小的学生信息。提供了具体的代码实现细节。

摘要由CSDN通过智能技术生成

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

学生数据：

 [{'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);
            },

<label-template :title="followEighteenTitle"></label-template>
    <ul v-for="item in followEighteen">
        <li :key="item.id">
            <span>姓名是：{
  {item.name}}</span>
            <span>性别是：{
  {item.sex}}</span>
            <span>年龄是：{
  {item.age}}</span>
        </li>
    </ul>

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

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

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

<label-template :title="minAgeTitle"></label-template>
    <ul v-for="(item,index) in sortedAge">
        <li :key="item.id" v-if="index === 0">
            <span>姓名是：{
  {item.na