正文

vue 列表过滤和排序

IP云
IP云V管理员/1 阅读
11/28
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示
  <body>

        <div id="root">

            <h1>员工列表</h1>

            <input type="text" placeholder="请输入查询名字" v-model="keywrde">

            <button @click="suotType=1"> 升序排序</button>

            <button @click="suotType=2">降序排序</button>

            <button @click="suotType=0"> 原顺序</button>

            <ul>

                <!-- in 还可以换成of -->

                <li v-for="(p,index) of filPerons" :key="index">

                    <!-- key ""里可以换成index 但是执行效率低  用p.id 执行的效率高 -->

                    {{p.name}}-{{p.age}}-{{p.phone}}-{{p.score}}

                </li>

            </ul>

        </div>

        <script>

        Vue.config.productionTip=false;//阻止运行时提示开发版本

          new Vue({

            el:"#root",

            data:{

           keywrde:'',

           suotType:0,  //0原顺序  1升序  2升序

          perons:[

              {id:'001',name:'老徐',age:20,phone:'13608806913',score:65.4},

              {id:'002',name:'许老',age:13,phone:'19958030698',score:89.4},

              {id:'003',name:'张大柱',age:20,phone:'13608806913',score:88},

              {id:'004',name:'李大钊',age:30,phone:'15925503566',score:65.4},

              {id:'004',name:'李总',age:10,phone:'1557578988788',score:55.4},

              {id:'004',name:'张三',age:50,phone:'15925503566',score:96}

              ]

            },

            computed:{

                //计算属性

             filPerons(){

                 //定义一个数组

                const arr= this.perons.filter((p)=>{

                  return p.name.indexOf(this.keywrde) !==-1

              })

              //判断是否需要排序

              if (this.suotType) {

                arr.sort((p1,p2)=>{

                return this.suotType ===1? p2.score-p1.score : p1.score-p2.score//升序后一个减前一个  降序前一个减后一个

                  })

              }

              return arr

             }

            }

        })

       </script>

相关阅读

目录[+]