vue 列表过滤和排序 

  <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>

　　

posted @ 2021-11-20 15:41  And杰然  阅读(86)  评论(0)    收藏  举报