Heim >Web-Frontend >js-Tutorial >Detaillierte Einführung in dieses Problem in der Implementierung der Vue-Listensortierung (Codebeispiel)

Detaillierte Einführung in dieses Problem in der Implementierung der Vue-Listensortierung (Codebeispiel)

不言nach vorne: 2019-03-15 17:05:142512Durchsuche

Der Inhalt dieses Artikels ist eine detaillierte Einführung (Codebeispiel) zu diesem Problem bei der Implementierung der Vue-Listensortierung. Ich hoffe, dass er für Sie hilfreich ist. .

Ich habe kürzlich über das Vue-Framework gelesen und die Art und Weise, wie dies in einem der Beispiele geschrieben wurde, hat mich verwirrt

<!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>

In der ersten Zeile der filterPerson-Funktion in diesem Stapel des Codes: Die Zuweisung von this erstellt ein Objekt und weist es einer Konstante
zu. In einigen Tutorials heißt es, dass dies die zu verwendenden Daten sind Kommentieren Sie es später aus und fügen Sie dann jedes Mal
vor jeder Variablen hinzu. this

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;
                }
            }

Daher werden an dieser Stelle die zu verwendenden Daten im Voraus platziert. Der Hauptgrund ist Beachten Sie, dass die Funktion selbst diese Variablen nicht hat, also direkt in Wenn die Funktion intern verwendet wird, wird ein Fehler gemeldet, daher muss sie von der externen Vue-Instanz abgerufen werden. Wenn Sie dies nicht tun, müssen Sie viel mehr darüber schreiben.

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in dieses Problem in der Implementierung der Vue-Listensortierung (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

常量堆对象 this

Stellungnahme：

Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Detaillierte Einführung in den JavaScript-Ausführungskontext (mit Code)Nächster Artikel：Detaillierte Einführung in den JavaScript-Ausführungskontext (mit Code)

In Verbindung stehende Artikel

Mehr sehen