Detailed introduction to this problem in Vue list sorting implementation (code example)-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Detailed introduction to this problem in Vue list sorting implementation (code example)

不言

Mar 15, 2019 pm 05:05 PM

html5 javascript

This article brings you a detailed introduction (code example) about this problem in the implementation of Vue list sorting. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .

I was reading about the vue framework recently, and the way this was written in one of the examples made me very confused.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="demo">
        search: <input type="text" v-model="searchName">
        <ul>
            <li v-for="(p,index) in filterPersons" :key="index">
                {{index}} --- {{p.name}} --- {{p.age}}
            </li>
        </ul>
        <button @click="setOrderType(1)">年龄升序</button>
        <button @click="setOrderType(2)">年龄降序</button>
        <button @click="setOrderType(0)">原本顺序</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#demo',
            data: {
                searchName: '',
                /**
                 * 排序种类:
                 *  0 - 原本顺序
                 *  1 - 年龄升序
                 *  2 - 年龄降序
                 */
                orderType: 0,
                persons: [{
                        name: 'Tom',
                        age: 18
                    },
                    {
                        name: 'Jack',
                        age: 20
                    },
                    {
                        name: 'Bob',
                        age: 16
                    },
                    {
                        name: 'Kaka',
                        age: 25
                    },
                    {
                        name: '22',
                        age: 23
                    },
                    {
                        name: '33',
                        age: 18
                    },
                    {
                        name: 'Shadow',
                        age: 21
                    },
                    {
                        name: 'Good',
                        age: 18
                    },
                    {
                        name: 'Lily',
                        age: 20
                    },
                    {
                        name: 'Lena',
                        age: 19
                    }
                ]
            },
            computed: {
                filterPersons() {
                    // 取出相关的数据
                    const {
                        searchName,
                        persons,
                        orderType
                    } = this;

                    let flag;
                    flag = persons.filter(p => p.name.indexOf(searchName) !== -1);

                    if (orderType !== 0) {
                        flag.sort(function (p1, p2) {
                            if (orderType === 2) {
                                return p2.age - p1.age;
                            } else {
                                return p1.age - p2.age;
                            }
                        });
                    }

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

</html>

Copy after login

The filterPerson function in this pile of code The first line performs the assignment of this, creates an object and assigns it to a constant
In some tutorials, it is said that this is the data to be used.
In fact, it is a simplified operation, because later I Comment it out, and then add this in front of each variable and it will still run

computed: {
                filterPersons() {
                    // 取出相关的数据
                    // const {
                    //     searchName,
                    //     persons,
                    //     orderType
                    // } = this;

                    let flag;
                    flag = this.persons.filter(p => p.name.indexOf(this.searchName) !== -1);

                    if (this.orderType !== 0) {
                        flag.sort(function (p1, p2) {
                            if (this.orderType === 2) {
                                return p2.age - p1.age;
                            } else {
                                return p1.age - p2.age;
                            }
                        });
                    }

                    return flag;
                }
            }

Copy after login

So, here, the data to be used is placed in this in advance, mainly There are no these variables in the function itself, so if you use them directly inside the function, an error will be reported, so you need to get them from the external vue instance. If you don't do this, you have to write a lot more this.

The above is the detailed content of Detailed introduction to this problem in Vue list sorting implementation (code example). For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn