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.按“值 ...
随机推荐
- request的Content-Type小结
一.Content-Type定义 Content-Type MediaType,即是Internet Media Type,互联网媒体类型:也叫做MIME类型,在Http协议消息头中,使用Conten ...
- hdu3092
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3092 题目描述:将一个数拆分成几个数之和,问这几个数能得到的最大的最小公倍数模上给定的一个数是多少? ...
- 在Centos下安装httpd、php、Mysql并配置(转载)
转自:http://club.jledu.gov.cn/?action-viewspace-itemid-299020 1.安装Apahce, PHP, Mysql, 以及php连接mysql库组件. ...
- Swift4 模式, 枚举型
创建: 2018/03/05 完成: 2018/03/05 更新: 2018/03/10 改变标题 [Swift4 模式] -> [Swift4 模式, 枚举型] 补充RawRepresenta ...
- bzoj 3105: [cqoi2013]新Nim游戏【线性基+贪心】
nim游戏的先手必胜条件是所有堆的火柴个数异或和为0,也就是找一个剩下火柴堆数没有异或和为0的子集的方案,且这个方案保证剩下的火柴个数总和最大 然后我就不会了,其实我到现在也不知道拟阵是个什么玩意-- ...
- 洛谷P2254 [NOI2005]瑰丽华尔兹（单调队列）
传送门 题解 大概就是设$dp[i][x][y]$表示在第$i$个时间段,在$(x,y)$时的最大滑动距离 然后转移是$dp[i][x][y]=max(dp[i-1][x][y],dp[i][x'][ ...
- java 学习书籍
<Effective java> <深入理解java虚拟机> <Java并发编程实践> <Java Performance> <java解惑> ...
- javascript 冒泡与捕获的原理及操作实例
所谓的javascript冒泡与捕获不是数据结构中的冒泡算法,而是javascript针对dom事件处理的先后顺序,所谓的先后顺序是指针对父标签与其嵌套子标签,如果父标签与嵌套子标签均有相同的事件时, ...
- 进击的Python【第十五章】：Web前端基础之DOM
进击的Python[第十五章]:Web前端基础之DOM 简介:文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示 ...
- 树上最长链 Farthest Nodes in a Tree LightOJ - 1094 && [ZJOI2007]捉迷藏 && 最长链
树上最远点对(树的直径) 做法1:树形dp 最长路一定是经过树上的某一个节点的. 因此: an1[i],an2[i]分别表示一个点向下的最长链和次长链,次长链不存在就设为0:这两者很容易求 an3[i ...