本篇文章给大家带来的内容是关于vue列表排序实现中的this问题的详细介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
最近在看vue框架的知识,然后其中有个例子中的this的写法让我很疑惑
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: '#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>
在这堆代码中的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。
以上就是vue列表排序实现中的this问题的详细介绍(代码示例)的详细内容,更多请关注php中文网其它相关文章!
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号