zoukankan      html  css  js  c++  java
  • vue进行代码排序

    <template>
    
    <div>
        <div>
        <h3>排序
        </h3>
        <button @click="orderByAge(0)">默认</button>
        <button @click="orderByAge(2)">升序</button>
        <button @click="orderByAge(1)">降序</button>
    </div>
        <h3>搜索列表</h3>
    <input type="text" v-model="searchName" placeholder="请输入名字">
    
    <ul>
        <li v-for="(p,index) in fileterPersons">
            {{index}} --{{p.name}}--{{p.age}}
        </li>
    </ul>
    </div>
    </template>
    <script>
    export default{
        name:"list",
        data(){
            return {
                orderType:0,
              searchName:'',
                persons:[
                    {name:'张三',age:18,sex:''},
                    {name:'李四2',age:128,sex:''},
                    {name:'王五',age:138,sex:''},
                    {name:'赵六',age:148,sex:''},
                    {name:'田七',age:158,sex:''},
                    {name:'邢八',age:168,sex:''},
                    {name:'高久',age:178,sex:''},
    
                    
                    ],
            }
        },
    
        methods:{
            orderByAge(orderType)
            {
                this.orderType=orderType;
            }
        },
        computed:{
    //过滤的
    fileterPersons(){
        //ordertype传过来
    let {searchName,persons,orderType}=this;
    let arr=[...persons];
    //
    if(searchName.trim()){
        arr=persons.filter((p)=>(p.name.indexOf(searchName)!==-1));
    }
    //排序
    if(orderType){
        arr.sort((p1,p2)=>{
            if(orderType===1){//1为降序
           return  p2.age-p1.age;
            }else{
              return   p1.age-p2.age;
            }
    
    
    
        });
    }
    return arr;
    }
        },
    }
    </script>
    <style scoped>
    
    </style>
  • 相关阅读:
    用户、角色和权限关系
    IDEA debug启动的时候需要等半个小时甚至更长时间
    快速启动服务
    leetcode — rotate-image
    leetcode — permutations-ii
    leetcode — jump-game-ii
    leetcode — jump-game
    leetcode — trapping-rain-water
    leetcode — first-missing-positive
    leetcode — combination-sum-ii
  • 原文地址:https://www.cnblogs.com/q1359720840/p/13913884.html
Copyright © 2011-2022 走看看