vue_小项目_模糊搜索(列表过滤)_结果排序

最新推荐文章于 2024-09-03 02:01:58 发布

aof26372

最新推荐文章于 2024-09-03 02:01:58 发布

阅读量195

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/tianxiaxuange/p/10383855.html

版权

html

    <div id="test">
        <label>
            <input type="text" v-model="searchWord" placeholder="搜索一下"/>
        </label>
        <button type="button" @click="orderType=1">原来排序</button>
        <button type="button" @click="orderType=2">升序排序</button>
        <button type="button" @click="orderType=3">降序排序</button>
        
        <ul>
            <li v-for="(p, index) in searchResult">
                {{p.name}}----{{p.age}}
            </li>
        </ul>
        
    </div>

<script src="./js/vue.js"></script>
    <script>
        new Vue({
            el:"#test",
            data(){
                return {
                    persons:[
                        {name:"Tom", age:18},
                        {name:"Jack", age:16},
                        {name:"Jerry", age:15},
                        {name:"Kate", age:17},
                        {name:"Lee", age:14}
                    ],
                    searchWord: "",
                    orderType: 1
                }
            },
            computed:{
                searchResult(){
                    const {orderType, searchWord, persons} = this;
                    
                    let result = persons.filter(person=>person.name.indexOf(searchWord)!==-1);
                    
                    if(orderType !== 1){
                        result.sort((one, two)=>{
                            if(orderType === 2){
                                return one.age - two.age
                            }else if(orderType === 3){
                                return two.age - one.age
                            }
                        })
                    }
                    
                    return result;
                }
            }
        })
    </script>