Vue リストの並べ替え実装におけるこの問題の詳細な紹介 (コード例)-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Vue リストの並べ替え実装におけるこの問題の詳細な紹介 (コード例)

不言

Mar 15, 2019 pm 05:05 PM

html5 javascript

この記事では、Vue のリストソート実装におけるこの問題について詳しく紹介 (コード例) しています。一定の参考値があります。困っている友人は参考にしてください。お役に立てれば幸いです。

私は最近 vue フレームワークについて読んでいましたが、サンプルの 1 つでこれがどのように書かれているかを見て非常に混乱しました。

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

ログイン後にコピー

この山の filterperson 関数コードの最初の行は、this の割り当てを実行し、オブジェクトを作成し、それを定数に割り当てます。
一部のチュートリアルでは、これが使用されるデータであると言われています。
実際には後でコメントアウトし、各変数の前に this を追加しても引き続き実行されるため、これは簡素化された操作です。関数自体にはこれらの変数が存在しないため、関数内で直接使用するとエラーが報告されるため、外部のvueインスタンスから取得する必要があります。そうしないと、これをさらにたくさん書かなければなりません。

以上がVue リストの並べ替え実装におけるこの問題の詳細な紹介 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。