devbox
在线问答5
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue中的列表过滤和列表排序_vue list过滤

作者：在线问答5 | 2024-08-18 16:33:18

赞

踩

vue list过滤

列表过滤

    1. <body>
    2.     <div id="root">
    3.         <!--输入框用于模糊查询-->
    4.         <input type="text" placeholder="请你输入名字" v-model="name">
    5.         <ul>
    6.             <!--in可以换成of-->
    7.                <li v-for="(p,index) in persons" :key="index">{{p.name}}-{{p.age}}-{{p.sex}}</li>
    8.         </ul>
    9.     </div>
    10. </body>
    11. <script>
    12.     const vm = new Vue({
    13.         el:'#root',
    14.         data: {
    15.             name: '',
    16.         persons:[
    17.             {id:'001',name:'马冬梅',age:'21',sex:'男'},
    18.             {id:'002',name:'周冬雨',age:'20',sex:'男'},
    19.             {id:'003',name:'蔡徐坤',age:'25',sex:'女'},
    20.             {id:'004',name:'周杰伦',age:'24',sex:'女'},
    21.         ],
    22.         },
    23.         //只是监听的作用。先用简写看能不能解决问题
    24.         watch: {
    25.             //参数有两个，一个为变化前的参数，一个为变化后的参数。这里只要变化后的参数
    26.             name(val){
    27.                 //filter为过滤的作用,让其过滤出来.但过滤出来的是新数组没有改变原来的值。故用persons接收
    28.               this.persons =  this.persons.filter((p)=>{
    29.                 //p.name.indexOf(val)意思是让p.name中查询有没有与val值(也就是name属性)一样的，进行返回除-1以外的索引
    30.                     return p.name.indexOf(val) !== -1
    31.                 })
    32.             }
    33.         }
    34.     })
    35. </script>

  • 运行一下,因为过滤的缘故，越是搜索数据越少。预期不符.

    解决方案:

    1、加入空的数组 flashPersons，作用是保留persons数组的数据

    2、用完整的watch加入 immediate: true进行尝试

    3、用index方法将flashPersons显示出来数据，

    1. <body>
    2.     <div id="root">
    3.         <!--输入框用于模糊查询-->
    4.         <input type="text" placeholder="请你输入名字" v-model="name">
    5.         <ul>
    6.             <!--保留原来的数组-->
    7.                <li v-for="(p,index) in flashPersons" :key="index">{{p.name}}-{{p.age}}-{{p.sex}}</li>
    8.         </ul>
    9.     </div>
    10. </body>
    11. <script>
    12.     const vm = new Vue({
    13.         el:'#root',
    14.         data: {
    15.         name: '',
    16.         persons:[
    17.             {id:'001',name:'马冬梅',age:'21',sex:'男'},
    18.             {id:'002',name:'周冬雨',age:'20',sex:'男'},
    19.             {id:'003',name:'蔡徐坤',age:'25',sex:'女'},
    20.             {id:'004',name:'周杰伦',age:'24',sex:'女'},
    21.         ],
    22.         flashPersons: [],
    23.         },
    24.         //因为要使用immediate:true，故不能缩写
    25.              watch: {
    26.                  name: {
    27.   //加入immediate:true，当用户什么都没有输入时，p为空值。直接调用handler方法，p.name.indexOf(val)中p数组中每个对象的name空值为0，故符合查询条件，都显示出来。
    28.                      immediate: true,
    29.                      handler(val){
    30.                            this.flashpersons  = this.persons.filter((p)=>{
    31.                                return p.name.indexOf(val) !== -1
    32.                            })
    33.                     }
    34.              }
    35.          }
    36.    }
    37.     })
    38. </script>

    由于watch的复杂性，用computed计算属性更好

    • 为什么计算属性更好，可以这么想。

    • 1、computed是由data中的数据是计算得来的，无需像watch监听数据的改变才变化。

    • 2、computed计算出来的属性，不会修改原来的属性。无需在创建空数组

      1. <body>
      2.     <div id="root">
      3.         <!--输入框用于模糊查询-->
      4.         <input type="text" placeholder="请你输入名字" v-model="name">
      5.         <ul>
      6.             <!--保留原来的数组-->
      7.                <li v-for="(p,index) in flashPersons" :key="index">{{p.name}}-{{p.age}}-{{p.sex}}</li>
      8.         </ul>
      9.     </div>
      10. </body>
      11. <script>
      12.     const vm = new Vue({
      13.         el:'#root',
      14.         data: {
      15.         name: '',
      16.         persons:[
      17.             {id:'001',name:'马冬梅',age:'21',sex:'男'},
      18.             {id:'002',name:'周冬雨',age:'20',sex:'男'},
      19.             {id:'003',name:'蔡徐坤',age:'25',sex:'女'},
      20.             {id:'004',name:'周杰伦',age:'24',sex:'女'},
      21.         ],
      22.         },
      23.        computed: {
      24.           //计算属性没有用到修改set，直接用简写形式。
      25.            fashPersons(){
      26.           //filter方法返回的是新数组。计算属性的值由return返回
      27.              return this.persons.filter((p)=>{
      28.                    return p.name.indexOf(this.name) !== -1
      29.                })
      30.            }
      31.        }
      32.         
      33.     
      34.     })
      35. </script>

    • 当注释后的代码，无法折叠时。可以用#region和#endregion

      列表排序

      • 思路分析

        当点击升序，sortType的值变为2,之后执行v-for语句中flashPersons在查询的基础上。添加一个排序的方法。

        点击原数组按钮，sortType的值变为0。回到只有查询的功能。也就是列表过滤的内容

        1. <body>
        2.     <div id="root">
        3.        <input type="text" placeholder="请你输入名字" v-model="name">
        4.         <button @click="sortType = 2">升序</button>
        5.         <button @click="sortType = 1">降序</button>
        6.         <button @click="sortType = 0">原数组</button>
        7.         <ul>
        8.             <!--保留原来的数组-->
        9.             <li v-for="(p,index) in flashPersons" :key="index">{{p.name}}-{{p.age}}-{{p.sex}}</li>
        10.         </ul>
        11.     </div>
        12. </body>
        13. <script>
        14.     const vm = new Vue({
        15.         el:'#root',
        16.         data: {
        17.         name: '',
        18.         sortType: 0,
        19.         persons:[
        20.             {id:'001',name:'马冬梅',age:'21',sex:'男'},
        21.             {id:'002',name:'周冬雨',age:'20',sex:'男'},
        22.             {id:'003',name:'蔡徐坤',age:'25',sex:'女'},
        23.             {id:'004',name:'周杰伦',age:'24',sex:'女'},
        24.         ],
        25.         },
        26.        computed: {
        27.     flashPersons () {
        28.       //实现查询之后，这里将第一个return 改成 const num ，因为不着急进行返回数据。实现的功能是查询和排序一同实现
        29.       const num = this.persons.filter((p) => {
        30.           //这个return 将数据返回给num
        31.         return p.name.indexOf(this.name) !== -1
        32.       })
        33.       //this.sorType为true,也就是等于1或2
        34.       if (this.sortType) {
        35.       //利用sort()方法实现升序和降序的功能，p1 - p2 为升序，p2 - p1为降序
        36.         num.sort((p1, p2) => {
        37.           return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
        38.         })
        39.       }
        40.           //这个return 将数据返回给flashPersons
        41.       return num
        42.     }
        43.   }
        44.     })
        45. </script>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/在线问答5/article/detail/998182
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号