首先

    <input type="text" name="" id="" placeholder="输入姓名">
    <button>年龄升序</button>
    <button>年龄降序</button>
    <button>原顺序</button>
    <ul>
      <li>

      </li>
    </ul>

先把数据在li中遍历，然后在input框中，对其进行搜索筛选，当存在关键字时显示

        keyword: "",
        users: [
          { uname: "张三", age: 20, sex: "女" },
          { uname: "李四", age: 18, sex: "女" },
          { uname: "王五", age: 45, sex: "女" },
          { uname: "赵六", age: 33, sex: "女" }
        ]

    <input type="text" name="" id="" placeholder="输入姓名" v-model="keyword">
    <button>年龄升序</button>
    <button>年龄降序</button>
    <button>原顺序</button>
    <ul>
      <li v-for="(item,index) in list" :key="index">
        {{item.uname}}-{{item.age}}-{{item.sex}}
      </li>
    </ul>

      computed: {
        list() {
          var arr = this.users.filter(item => {
            return item.uname.indexOf(this.keyword) !== -1
          })
          return arr;
        }
      }

通过indexOf对遍历出来的数据进行筛选

然后就是升序，降序，以及原顺序

最简单的写法是绑定升序降序原顺序的点击事件，然后直接排序，原顺序直接刷新

            // 原顺序
            clear(){
                location.reload()
            },
            // 最大年龄
            maxAge(){
                var arr=this.list.sort((a,b)=>{
                    return a.age-b.age
                })
                console.log(arr);
                this.list=arr
            },
            // 最小年龄
            minAge(){
                var arr=this.list.sort((a,b)=>{
                    return b.age-a.age
                })
                console.log(arr);
                this.list=arr
            },

其次是使用计算属性，可以使用三元表达式，也可以使用if条件判断

由于我用的是bootstrap5.0的效果，我个人感觉是比较好看的，主要速度快，我想着回头要不整理一期bookstrap推荐，国内大大小小的都做过这种

兄弟萌可以加载下来直接复制粘贴很好看

<button type="button" class="btn btn-outline-info" @click="sortType=1">年龄升序</button>
<button type="button" class="btn btn-outline-danger" @click="sortType=2">年龄降序</button>
<button type="button" class="btn btn-outline-dark" @click="sortType=0">原顺序</button>

这个是通过sort 方法来实现的

list(){
    var arr=this.users.filter(item=>{
        return item.name.indexOf(this.keyword)!==-1
    })
    if(this.sortType){
        arr.sort((a,b)=>{
            //也可以使用if条件判断
            return this.sortType == 1 ? a.age-b.age :b.age-a.age
        })
    }
    return arr
}

最后一种就是监听，通过watch来实现

watch:{
    keyword:{
        immediate:true,
        handler(val){
            this.list=this.users.filter(item=>{
                return item.name.indexOf(val)!==-1
            })
        }
    },
    sortType:{
        handler(val){
            if(val){
                this.list.sort((a,b)=>{
                    return val==1?a.age-b.age:b.age-a.age
                })
            }else{
                this.list=JSON.parse(JSON.stringify(this.users))
            }
        }
    }
},

keyword里的val是输入的内容，而sortType中的val是自定义用来区分的值

原创不易，点个赞吧~