vue列表排序实现中的this问题

本文转载自查看原文 2019-05-12 19:16 1038

最近在看vue框架的知识，然后其中有个例子中的this的写法让我很疑惑

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

所以，在这个地方是将要用的数据事先放在了this中, 主要是函数中本身没有这几个变量，所以直接在函数内部使用是会报错的，因此需要去外面的vue实例中获取。如果不这么做，要多写很多个this。

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 vue 列表的排序过渡 shuffle遇到的问题 python中列表中的字典的排序问题 python中列表排序，字典排序，列表中的字典排序 Python 如何实现多维列表的排序 python中给列表元素排序 vue element-ui穿梭框选择后列表排序问题列表拖拽排序 ----vue.js 23.VUE学习之-列表的排序sort 根据列表中字典中的某个value排序商品列表分页和排序功能实现