vue列表的搜索和排序

最新推荐文章于 2024-05-24 17:11:08 发布

虽千万人吾往矣

最新推荐文章于 2024-05-24 17:11:08 发布

阅读量474

点赞数

分类专栏： vue 文章标签：列表 vue

本文链接：https://blog.csdn.net/weixin_44575660/article/details/107588696

版权

vue 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

根据filter和lambda表达式筛选出满足条件的元素，并通过sort方法对结果进行排序，显示在列表中，但是排序只是对中间结果进行排序并不影响原本数据，当显示原有数据就可以不通过排序直接返回

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06_列表渲染_过滤与排序</title>
</head>
<body>

<div id="demo">
  <input type="text" v-model="searchName">
  <ul>
    <li v-for="(p, index) in filterPersons" :key="index">
      {{index}}--{{p.name}}--{{p.age}}
    </li>
  </ul>
  <div>
    <button @click="setOrderType(2)">年龄升序</button>
    <button @click="setOrderType(1)">年龄降序</button>
    <button @click="setOrderType(0)">原本顺序</button>
  </div>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      searchName: '',
      orderType: 0, // 0代表不排序, 1代表降序, 2代表升序
      persons: [
        {name: 'Tom', age:18},
        {name: 'Jack', age:17},
        {name: 'Bob', age:19},
        {name: 'Mary', age:16}
      ]
    },

    computed: {
      filterPersons () {
        //取出相关数据
        const {searchName,persons,orderType} = this
        //返回结果
        let fPersons
        //遍历每一个元素，当包含是被筛选出来
        fPersons = persons.filter(p => p.name.indexOf(searchName)!=-1)

        //排序
        if(orderType != 0){
          fPersons.sort(function (p1,p2) {
            //0--原来  1--升序  2--降序
            if(orderType == 2){
              return p2.age - p1.age
            } else {
              return p1.age - p2.age
            }
          })
        }
        return fPersons
      }
    },

    methods: {
      setOrderType (orderType) {
        this.orderType = orderType
      }
    }
  })
</script>
</body>
</html>

虽千万人吾往矣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue列表的搜索和排序

根据filter和lambda表达式筛选出满足条件的元素，并通过sort方法对结果进行排序，显示在列表中，但是排序只是对中间结果进行排序并不影响原本数据，当显示原有数据就可以不通过排序直接返回<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>06_列表渲染_过滤与排序</title></head><body>
复制链接

扫一扫