vue列表排序實現中的this問題

時間 2019-11-11

標籤 vue 列表排序實現問題简体版

原文原文鏈接

最近在看vue框架的知識，而後其中有個例子中的this的寫法讓我很疑惑javascript

<!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依舊能夠跑起來html

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

因此，在這個地方是運用了ES6的解構賦值, 將想要用的數據做爲賦給括號內的變量, 在函數中自己沒有這幾個變量，因此直接在函數內部使用是會報錯的，所以須要去外面的vue實例中獲取。這樣作能夠少寫一些thisvue

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。