Maison > Article > interface Web > Introduction détaillée à ce problème dans l'implémentation du tri de liste Vue (exemple de code)

Introduction détaillée à ce problème dans l'implémentation du tri de liste Vue (exemple de code)

不言avant: 2019-03-15 17:05:142470parcourir

Le contenu de cet article est une introduction détaillée (exemple de code) sur ce problème dans la mise en œuvre du tri de liste Vue. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .

Je lisais récemment sur le framework vue, et la façon dont cela a été écrit dans l'un des exemples m'a rendu confus

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

La fonction filterPerson est la première de cette pile de code La ligne effectue une this affectation, crée un objet et l'affecte à une constante
Dans certains tutoriels, il est dit que ce sont les données à utiliser
est en fait une opération simplifiée, car je le ferai. commentez-le plus tard, puis l'ajout de this devant chaque variable peut toujours s'exécuter

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

Par conséquent, les données à utiliser y sont placées à l'avance, principalement parce que la fonction elle-même n'a pas ces variables. , donc si elle est utilisée directement dans la fonction, une erreur sera signalée, elle doit donc être obtenue à partir de l'instance de vue externe. Si vous ne le faites pas, vous devrez écrire beaucoup plus de ceci.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

常量堆对象 this

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Introduction détaillée au contexte d'exécution JavaScript (avec code)Article suivant：Introduction détaillée au contexte d'exécution JavaScript (avec code)

Articles Liés

Voir plus