微信扫一扫打赏支持

VUE实例课程---1、计算属性实现列表的搜索和排序

VUE实例课程---1、计算属性实现列表的搜索和排序

一、总结

一句话总结：

计算属性实现列表的搜索和排序中：计算属性用于搜索的关键字变化之后自动更新列表数组，排序就是指定不同的排序标志，根据不同的排序字段来改变列表元素的顺序
<div id="app">
    <label>
        搜索名字：<input type="text" v-model="searchName">
    </label>
    <p v-for="item in filterPersons">
        {{item.id}}---{{item.name}}---{{item.age}}
    </p>
    <div>
        <button @click="setOrderType(1)">年龄升序</button>
        <button @click="setOrderType(-1)">年龄降序</button>
        <button @click="setOrderType(0)">原本顺序</button>
    </div>

</div>
<script src="../js/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            searchName:'',
            orderType: 0, // 0代表不排序, 1代表升序, -1代表降序
            persons: [
                {id:1,name:'刘备',age:23},
                {id:2,name:'张飞',age:22},
                {id:3,name:'关羽',age:41},
                {id:4,name:'赵云',age:33},
                {id:5,name:'赵羽飞',age:15},
                {id:6,name:'刘禅',age:13},
                {id:7,name:'刘云禅',age:2}
            ]
        },
        computed:{
            filterPersons:function () {
                // 取出相关数据
                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 (a,b) {
                        if(orderType===1){
                            return a.age-b.age;
                        }else{
                            return b.age-a.age;
                        }
                    });
                }

                return arr;
            }
        },
        methods:{
            setOrderType(orderType){
                this.orderType=orderType;
            }
        }
    });
</script>

 

 

 

二、计算属性实现列表的搜索和排序

博客对应课程的视频位置：

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>1、计算属性实现列表的搜索和排序</title>
 6 </head>
 7 <body>
 8 <!--
 9 
10 计算属性实现列表的搜索和排序中：
11 计算属性用于搜索的关键字变化之后自动更新列表数组，
12 排序就是指定不同的排序标志，根据不同的排序字段来改变列表元素的顺序
13 
14 -->
15 <div id="app">
16     <label>
17         搜索名字：<input type="text" v-model="searchName">
18     </label>
19     <p v-for="item in filterPersons">
20         {{item.id}}---{{item.name}}---{{item.age}}
21     </p>
22     <div>
23         <button @click="setOrderType(1)">年龄升序</button>
24         <button @click="setOrderType(-1)">年龄降序</button>
25         <button @click="setOrderType(0)">原本顺序</button>
26     </div>
27 
28 </div>
29 <script src="../js/vue.js"></script>
30 <script>
31     let vm = new Vue({
32         el: '#app',
33         data: {
34             searchName:'',
35             orderType: 0, // 0代表不排序, 1代表升序, -1代表降序
36             persons: [
37                 {id:1,name:'刘备',age:23},
38                 {id:2,name:'张飞',age:22},
39                 {id:3,name:'关羽',age:41},
40                 {id:4,name:'赵云',age:33},
41                 {id:5,name:'赵羽飞',age:15},
42                 {id:6,name:'刘禅',age:13},
43                 {id:7,name:'刘云禅',age:2}
44             ]
45         },
46         computed:{
47             filterPersons:function () {
48                 // 取出相关数据
49                 const {searchName, persons, orderType} = this;
50                 let arr=[...persons];//初始值
51 
52                 // 过滤数组
53                 if(searchName.trim()){
54                     arr=persons.filter(p=>p.name.indexOf(searchName)!==-1);
55                 }
56 
57                 //排序
58                 if(orderType){
59                     arr.sort(function (a,b) {
60                         if(orderType===1){
61                             return a.age-b.age;
62                         }else{
63                             return b.age-a.age;
64                         }
65                     });
66                 }
67                 return arr;
68             }
69         },
70         methods:{
71             setOrderType(orderType){
72                 this.orderType=orderType;
73             }
74         }
75     });
76 </script>
77 </body>
78 </html>

 

 

 

 

 

 
posted @ 2020-04-20 12:08  范仁义  阅读(643)  评论(0)    收藏  举报