이 글은 Vue 목록 정렬 구현에서 이 문제에 대한 자세한 소개(코드 예제)를 제공합니다. 이는 특정 참고 가치가 있으므로 도움이 될 수 있습니다.
최근에 vue 프레임워크에 대해 읽었는데 예제 중 하나에 이것이 작성된 방식이 나를 매우 혼란스럽게 만들었습니다
<!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
는 여전히 실행될 수 있습니다
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!