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

caiyongji 发布于2019-08-23 15:56 / 1005人阅读

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





    
    Page Title
    



    
        search: 
        
            
                {{index}} --- {{p.name}} --- {{p.age}}

在这堆代码中的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;
                }
            }

所以，在这个地方是运用了ES6的解构赋值, 将想要用的数据作为赋给括号内的变量, 在函数中本身没有这几个变量，所以直接在函数内部使用是会报错的，因此需要去外面的vue实例中获取。这样做可以少写一些this

云服务器 GPU云服务器 javaScript中的this js中的this js中的this机制 js中的this与html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102555.html

vue里面的v-for列表循环

摘要：取到里面的偶数位的值在计算属性不适用的情况下例如，在嵌套循环中你可以使用一个方法一段取值范围的也可以取整数。列表渲染 v-for v-for可以把数据中的一个数组对应为一组元素v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。 {{item.text}} data:{ items:[ ...

verano 2019-08-20 19:05 评论0 收藏0
前端知识点

摘要：原理对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。在目标发出内容改变的事件后，直接接收事件并作出响应。首先是目标的构造函数，他有个数组，用于添加观察者。关于排序 js中sort函数的底层实现机制？ js中sort内置多种排序算法，是根据要排序数的乱序程度来决定使用哪一种排序方法。V8 引擎 sort 函数只给出了两种排序 Inse...

wums 2019-08-23 15:53 评论0 收藏0
原生渲染指令

摘要：代码原生渲染有时数据中携带了标签，输出它们时，按文本解析，如使用输出原生的使用原生指令解析数据中标签为原生你的站点上动态渲染的任意可能会非常危险，因为它很容易导致攻击。代码原生html渲染v-html 有时数据中携带了Html标签，输出它们时，按文本解析，如： new Vue({ data: { title:使用v-html输出原生的html, } ...

HitenDev 2019-08-22 16:34 评论0 收藏0
手摸手，带你用vue撸后台系列三(实战篇)

摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台系列一(基础篇)系类文章二：手摸手，带你用vue撸后台系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列...

Channe 2019-08-20 17:15 评论0 收藏0