_002_Vue_搜索和排序

最新推荐文章于 2024-08-05 19:46:05 发布

VeryHotLight

最新推荐文章于 2024-08-05 19:46:05 发布

阅读量152

点赞数

分类专栏： _035_VUE

_035_VUE 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<body>
<div id="component">
    <h2>搜索和排序</h2>
    <input v-model="searchName">
    <ul>
        <li v-for="(item,index) in filterPersons" :key="index">
            {{index}}--{{item.name}}--{{item.age}}
        </li>
    </ul>
    <button @click="setOrderType(2)">升序</button>
    <button @click="setOrderType(1)">降序</button>
    <button @click="setOrderType(0)">原本顺序</button>
</div>

<script type="text/javascript" src="../../lib_001_vue/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el : '#component',
        data : {
            persons :[
                {name:"Tom",age:18},
                {name:"Henry",age:15},
                {name:"Betty",age:20},
                {name:"Jerry",age:17},
                {name:"Adam",age:16},
            ],
            orderType : 0,
            searchName : ''
        },
        computed:{
            filterPersons(){
                const {searchName, persons, orderType} = this;
                let arr = persons;
                if(searchName.trim()){
                    arr = persons.filter(p => p.name.indexOf(searchName)!== -1);
                }
                if(orderType){
                    arr.sort(function(p1,p2){
                        if(orderType===1){
                            return p2.age-p1.age;
                        }else{
                            return p1.age - p2.age;
                        }
                    });
                }
                return arr;
            }
        },
        methods : {
            setOrderType(parameter){
                this.orderType = parameter;
            }
        }
    });
</script>
</body>