• 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>
  • 相关阅读:
    (5)Linux权限管理
    paloalto防火墙版本升级
    paloalto防火墙安装内容和软件更新
    paloalto防火墙激活许可证和订阅
    paloalto防火墙注册
    paloalto防火墙执行初始配置
    paloalto防火墙的优势
    方位话机X2主、备用服务器问题
    心态
    paloalto防火墙接口使用方法及实例
  • 原文地址:https://www.cnblogs.com/q1359720840/p/13913884.html
Copyright © 2020-2023  润新知