用computed watch写筛选列表的逻辑

最新推荐文章于 2023-07-13 12:35:13 发布

剑雨SNOW

最新推荐文章于 2023-07-13 12:35:13 发布

阅读量247

点赞数 1

文章标签：前端 javascript

本文链接：https://blog.csdn.net/m0_63135911/article/details/126610537

版权

1.了解 computed 和 watch 的区别

computed能完成的，watch一定能完成
watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作

写一个筛选列表来试试

2.用computed筛选列表的逻辑

第一步，搜索，就是将所有数据根据条件进行筛选，筛选出符合条件的，所有，需要经行filter 而筛选的条件就是根据搜索的关键字来进行寻找，找出来后，对其进行返回，然后是排序，排序有三个，一种是从大到小，一种是从小到大，还有一种是原数据排序，这时就需要上面的点击事件绑定一个数，根据条件判断点击的是哪个按钮，进行相应的排序，利用 sort排序，a-b为从小到大，b-a为从大到小，最后返回值即可。

   /***计算属性***/ 
        computed:{
            search(){
                var arr = this.list.filter(item=>{
                  return  item.name.indexOf(this.kw) != -1
                })
                if(this.stype){
                   arr.sort ((a,b)=>{
                    return this.stype == 1 ? a.age - b.age : b.age-a.age
                   }) 
                }
                return arr
            }
        },

3.用watch筛选列表逻辑

利用监听来写筛选列表，需要先找到监听的对象，搜索的监听对象则需要他双向绑定的关键字，然后设置立即加载，handler获取到关键字发生变化是的val，然后，还是根据条件对数据进行筛选，返回筛选出来的值，而后面的排序，则需要监听数据发生改变，所以监听那个不同顺序的点击事件的变量，这里就是stype，获取到它的val ，首先判断他是否为0，为0 则渲染最初的顺序，不为0 时，再判断val为1 还是 2 ，为1 则从小到大排序，为2 则从大到小排序。

  /***监听属性***/  
        watch:{
           kw:{
            immediate:true,
            handler(val){
                this.search = this.list.filter(item=>{
                    return item.name.indexOf(val) != -1
                })
            }
           },
          stype:{
            handler(val){
                // console.log(val);
               if(val){
                this.search.sort((a,b)=>{
                    return val == 1 ? a.age-b.age : b.age-a.age
                })
               }else{
                this.search = JSON.parse(JSON.stringify(this.list))
               }
            }
          }
        }

完整代码：

<!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="./vue.js"></script>
</head>
<body>
     <div id="root">
       <input type="text" name="" id="" placeholder="请输入要查询的姓名" v-model="kw"  >
       <button @click="stype = 1" >年龄升序</button>  <button @click="stype = 2" >年龄降序</button>  <button @click="stype = 0">原顺序</button>
       <ul>
        <li v-for="(item, index) in search" :key="index" >
             {{item.name}} - {{item.age}} - {{item.sex}}
        </li>
       </ul>
     </div>
</body>
</html>
<script>
    Vue.config.productionTip = false
    let vm = new Vue({
        el:'#root',
        data:{
            stype:0,
            search:[],
          list:[
            {name:"马冬梅",age:20,sex:"女"},
            {name:"周冬雨",age:19,sex:"女"},
            {name:"周杰伦",age:22,sex:"男"},
            {name:"温兆伦",age:21,sex:"男"}
          ],
          kw:''
        },
        //                  /***计算属性***/ 
        // computed:{
        //     search(){
        //         var arr = this.list.filter(item=>{
        //           return  item.name.indexOf(this.kw) != -1
        //         })
        //         if(this.stype){
        //            arr.sort ((a,b)=>{
        //             return this.stype == 1 ? a.age - b.age : b.age-a.age
        //            }) 
        //         }
        //         return arr
        //     }
        // }
         /***监听属性***/  
        watch:{
           kw:{
            immediate:true,
            handler(val){
                this.search = this.list.filter(item=>{
                    return item.name.indexOf(val) != -1
                })
            }
           },
          stype:{
            handler(val){
                // console.log(val);
               if(val){
                this.search.sort((a,b)=>{
                    return val == 1 ? a.age-b.age : b.age-a.age
                })
               }else{
                this.search = JSON.parse(JSON.stringify(this.list))
               }
            }
          }
        }
    })
</script>

注：需要下载一个 vue.js 来运行