vue列表排序实现中的this问题
最近在看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。
vue列表排序实现中的this问题的更多相关文章
- (尚010)Vue列表的搜素和排序
1.test010.html <!DOCTYPE html><html lang="en"><head> <meta charset=&q ...
- Vue学习之--------列表排序（ffilter、sort、indexOf方法的使用）、Vue检测数据变化的原理（2022/7/15）
文章目录 1.列表排序 1.1 .代码实例 1.2 .测试效果 1.3.需要掌握的前提知识 2.Vue监测数据变化的原理 2.1.代码实例 2.2 .测试效果 3.Vue检测数据的原理 3.1 基本知 ...
- 跟我学SharePoint 2013视频培训课程——排序、过滤在列表、库中的使用(10)
课程简介 第10天,SharePoint 2013排序.过滤在列表.库中的使用. 视频 SharePoint 2013 交流群 41032413
- Python中对列表排序实例
Python中对列表排序实例 发布时间:2015-01-04 09:01:50 投稿:junjie 这篇文章主要介绍了Python中对列表排序实例,本文给出了9个List的排序实例,需要的朋友可以参考 ...
- 在Vue&Element前端项目中，对于字典列表的显示处理
在很多项目开发中,我们为了使用方便,一般都会封装一些自定义组件来简化界面的显示处理,例如参照字典的下拉列表显示,是我们项目中经常用到的功能之一,本篇随笔介绍在Vue&Element前端项目中如 ...
- 【python cookbook】【数据结构与算法】13.通过公共键对字典列表排序
问题:想根据一个或多个字典中的值来对列表排序 解决方案:利用operator模块中的itemgetter()函数对这类结构进行排序是非常简单的. # Sort a list of a dicts on ...
- Python的列表排序
Python的列表排序 本文为转载,源地址为:http://blog.csdn.net/horin153/article/details/7076321 在 Python 中, 当需要对一个 list ...
- Python 列表排序方法reverse、sort、sorted详解
python语言中的列表排序方法有三个:reverse反转/倒序排序.sort正序排序.sorted可以获取排序后的列表.在更高级列表排序中,后两中方法还可以加入条件参数进行排序. reverse() ...
- python 字典排序，列表排序详细
在程序中使用字典进行数据信息统计时,由于字典是无序的所以打印字典时内容也是无序的.因此,为了使统计得到的结果更方便查看需要进行排序.Python中字典的排序分为按“键”排序和按“值”排序. 1.按“值 ...
随机推荐
- AutoIT: 对文件系统的菜单进行操作，有专门的语句WinMenuSelectItem
对文件系统的菜单进行操作,有专门的语句WinMenuSelectItem: Run("notepad.exe") WinWaitActive("[CLASS:Notepa ...
- linux下libpcap抓包分析
一.首先下载libpcap包http://www.tcpdump.org/#latest-release 然后安装,安装完成后进入安装根目录的tests文件夹,编译运行findalldevstest. ...
- JAVA JVM 流程二
作为一名Java使用者,掌握JVM的体系结构也是必须的.说起Java,人们首先想到的是Java编程语言,然而事实上,Java是一种技术,它由四方面组成:Java编程语言.Java类文件格式.Java虚 ...
- bzoj4326
二分+树剖+差分 之前的做法naive,莫名其妙的wa,明明uoj95分 看到最小最大上二分,树上路径问题直接剖,然后问题就转化成了一个判定问题,每次二分出最长路径长度,问能不能达到.那么我们就把所有 ...
- 修改 Appdelegate 文件名为添加项目前缀的方法
本文假设你的项目是 Test, 那么为了给你的 Appdelegate 文件保持按照项目名为前缀 ,就需要对 Appdelegate 文件进行修改前缀名. 技巧分享:将开发中的 Appdelegate ...
- Linux 常用命令五 软链接和硬链接
一.软链接 相当于windows的快捷方式,当源文件不存在时,软链接失效. 创建软链接: wang@wang:~/workpalce/python$ ls -l 总用量 -rw-rw-r-- wang ...
- bzoj 5277: [Usaco2018 Open]Out of Sorts【冒泡排序瞎搞】
首先考虑快排的递归什么时候停下,显然是当前段只剩下一个数了,也就是一个数两边出现分隔符 然后再考虑计算冒泡长度这个操作,因为有分割,所以我们可以把这些放到一起冒泡,这和递归每个区间冒泡是等价的 所以答 ...
- bzoj 4176: Lucas的数论【莫比乌斯反演+杜教筛】
首先由这样一个结论: \[ d(ij)=\sum_{p|i}\sum_{q|j}[gcd(p,q)==1] \] 然后推反演公式: \[ \sum_{i=1}^{n}\sum_{j=1}^{n}\su ...
- 解题报告：hdu 1556 Color the ball（区间修改，单点查询）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1556 Problem Description N个气球排成一排,从左到右依次编号为1,2,3....N ...
- Oracle10g安装过程中ORA-27125问题解决
Oracle10g在CentOS7的安装过程中报错如下错误信息: ORA-: unable to create shared memory segment 解决办法: [root@dbsrv3 dat ...