Vue2写模糊效果，和排序用法

万能守恒定律

已于 2023-04-26 08:57:15 修改

阅读量671

点赞数 2

分类专栏： vue 文章标签： elementui vue.js javascript

于 2022-01-18 12:13:35 首次发布

本文链接：https://blog.csdn.net/qq_50951790/article/details/122557300

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1.首先使用watch实现模糊效果的搜索（此处也可以用computed）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 模糊搜索 -->
    <div id="root">
        <!-- 遍历数组 -->
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWorld">
        <ul>
            <li v-for="p in filPerons" :key="p.id">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
        
    </div>
<script>

    //用watch实现
    new Vue({
        el:'#root',
        data:{
            keyWorld:'',
            persons:[
                {id:'001',name:'马冬梅',age:18,sex:'女'},
                {id:'002',name:'周冬雨',age:19,sex:'女'},
                {id:'003',name:'周杰伦',age:20,sex:'男'},
                {id:'004',name:'小阿伦',age:21,sex:'男'}
            ],
            //用一个中间数组接收，防止查完一次后，自动删除
            filPerons:[]
        },
        watch:{
            // 过滤操作
            keyWorld:{
                //刚开始就开始监视(目的是为了不存在空字符串)
                immediate:true,
                //indexOf用法，当数组中不存在该字符串时，返回-1
                handler(val){
                this.filPerons = this.persons.filter((p)=>{
                  return p.name.indexOf(val)!==-1
              })
            }
        }
        }
    })    
</script>
</body>
</html>

2.用computed实现模糊搜索和排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 模糊搜索 -->
    <div id="root">
        <!-- 遍历数组 -->
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWorld">
        <button @click="sortType = 2">年龄升序</button>
        <button @click="sortType = 1">年龄降序</button>
        <button @click="sortType = 0">原顺序</button>
        <ul>
            <li v-for="(p,index) in filPerons" :key="index">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
        
    </div>
<script>

    //用computed实现
    new Vue({
        el:'#root',
        data:{
            keyWorld:'',
            sortType:0, //0代表原顺序，1代表降序，2代表升序
            persons:[
                {id:'001',name:'马冬梅',age:23,sex:'女'},
                {id:'002',name:'周冬雨',age:19,sex:'女'},
                {id:'003',name:'周杰伦',age:32,sex:'男'},
                {id:'004',name:'小阿伦',age:21,sex:'男'}
            ]
        },
       computed:{
            filPerons(){
                const arr =  this.persons.filter((p)=>{
                    return p.name.indexOf(this.keyWorld)!==-1
                })
                //判断是否需要排序
                if(this.sortType){
                    //拿到过滤完的数组排序
                    arr.sort((p1,p2)=>{
                        //p1-p2（升序）和p2-p1（降序）
                        return this.sortType === 1? p2.age-p1.age :  p1.age-p2.age
                    })
                }
                return arr
            }
       },
    })    
</script>
</body>
</html>