Vue计算属性详解：项目实战搜索排序

最新推荐文章于 2024-01-13 14:35:19 发布

wx_lidysun

最新推荐文章于 2024-01-13 14:35:19 发布

阅读量483

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/lidysun/article/details/83445806

版权

Javascript 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="test">
        <input type="text" v-model="keyword">
        <ul>
            <li v-for="(item,index) in personsFilter">{{index}} -- {{item.name}} -- {{item.age}}</li>
        </ul>
        <button @click="sortOrderBy(1)">年龄升序</button>
        <button @click="sortOrderBy(2)">年龄降序</button>
        <button @click="sortOrderBy(0)">原始顺序</button>
    </div>
    <script>
        new Vue({
            el: '#test',
            data: {
                keyword: '',
                orderBy: 0, //0原始，1升序，2降序
                persons: [{
                    name: 'cat',
                    age: 18
                }, {
                    name: 'fat',
                    age: 22
                }, {
                    name: 'tom',
                    age: 16
                }, {
                    name: 'art',
                    age: 48
                }, {
                    name: 'bot',
                    age: 18
                }, {
                    name: 'bok',
                    age: 18
                }]
            },
            computed: {
                personsFilter: function() {
                    var keyword = this.keyword,
                        orderBy = this.orderBy,
                        persons = this.persons,
                        result = null;
                    result = persons.filter(function(a) {
                        return a.name.indexOf(keyword) !== -1;
                    });
                    if (orderBy !== 0) {
                        result.sort(function(a, b) {
                            if (orderBy === 2) {
                                // b - a 降序
                                return b.age - a.age
                            } else {
                                // a - b 升序
                                return a.age - b.age
                            }
                        })
                    }
                    return result;
                }
            },
            methods: {
                sortOrderBy(orderBy) {
                    this.orderBy = orderBy;
                }
            }
        });
    </script>
</body>

</html>

Vue计算属性详解：项目实战搜索排序