Vue 목록 정렬 구현(코드 예제)에서 이 문제에 대한 자세한 소개

이 글은 Vue 목록 정렬 구현에서 이 문제에 대한 자세한 소개(코드 예제)를 제공합니다. 이는 특정 참고 가치가 있으므로 도움이 될 수 있습니다.

최근에 vue 프레임워크에 대해 읽었는데 예제 중 하나에 이것이 작성된 방식이 나를 매우 혼란스럽게 만들었습니다

nbsp;html>


    <meta>
    <title>Page Title</title>
    <meta>


    <div>
        search: <input>
        <ul>
            <li>
                {{index}} --- {{p.name}} --- {{p.age}}
            </li>
        </ul>
        <button>年龄升序</button>
        <button>年龄降序</button>
        <button>原本顺序</button>
    </div>
    <script></script>
    <script>
        var vm = new Vue({
            el: &#39;#demo&#39;,
            data: {
                searchName: &#39;&#39;,
                /**
                 * 排序种类:
                 *  0 - 原本顺序
                 *  1 - 年龄升序
                 *  2 - 年龄降序
                 */
                orderType: 0,
                persons: [{
                        name: &#39;Tom&#39;,
                        age: 18
                    },
                    {
                        name: &#39;Jack&#39;,
                        age: 20
                    },
                    {
                        name: &#39;Bob&#39;,
                        age: 16
                    },
                    {
                        name: &#39;Kaka&#39;,
                        age: 25
                    },
                    {
                        name: &#39;22&#39;,
                        age: 23
                    },
                    {
                        name: &#39;33&#39;,
                        age: 18
                    },
                    {
                        name: &#39;Shadow&#39;,
                        age: 21
                    },
                    {
                        name: &#39;Good&#39;,
                        age: 18
                    },
                    {
                        name: &#39;Lily&#39;,
                        age: 20
                    },
                    {
                        name: &#39;Lena&#39;,
                        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>

이 코드 더미에 있는 filterPerson函数的第一行进行了this的赋值，创建了一个对象赋给了一个常量
在一些教程中表示这是取出要用的数据
其实算是简化操作，因为后面我将其注释掉，然后在每个变量前面加上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;
                }
            }

그래서 다음에서 사용될 것입니다. 이곳에 미리 데이터를 넣어두는데, 주로 함수 자체에는 이런 변수가 없기 때문에 함수 내부에서 직접 사용하면 에러가 발생하므로 외부 vue 인스턴스에서 가져와야 합니다. 이걸 안 하면 이 글을 더 많이 써야 해요.

위 내용은 Vue 목록 정렬 구현(코드 예제)에서 이 문제에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!