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: 捕捉路由器登陆的小例子
$url2 = "AX.XXX.XXX.COM" $oIE = _IECreate ($url2, , , , ) Sleep() ControlSetText('[REGEXPT ...
- 我使用过的Linux命令之hexdump - ”十六“进制查看器（转载）
转载:http://codingstandards.iteye.com/blog/805778 本文链接:http://codingstandards.iteye.com/blog/805778 ...
- ASP.NET Core MVC 打造一个简单的图书馆管理系统 (修正版)（一） 基本模型以及数据库的建立
前言: 本系列文章主要为我之前所学知识的一次微小的实践,以我学校图书馆管理系统为雏形所作. 本系列文章主要参考资料: 微软文档:https://docs.microsoft.com/zh-cn/asp ...
- Mac下Ruby升级与Rails的安装
也是醉了,网上查了半天一脸懵逼.然后自己动手试试 gem install rails瞬间命令行就没反应了,以为命令行挂了,但是一会儿报错说是没有权限. 好吧,那么来这个 sudo gem instal ...
- NOIp 2014 寻找道路【图的遍历/最短路】By cellur925
题目传送门 比较裸的图论,结果自己还是没做出来,我真菜. 我们根据题意,只要把不能通向终点的点求出,然后再分别以这些点为起点,求出它们能到达的点,这些点也不能在路径上. 之后跑一个最短路即可. 注意以 ...
- 关于浮动与清浮动 float
浮动常见的几种属性值 float {left; right; none; } 主要是定义元素朝哪个方向浮动: 元素浮动后的特性 在一行显示,父级的宽度放不下,自己折行: 支持宽高等样式: 不设置 ...
- AutoCAD2012启动错误 1308 源文件未找到
启动AutoCAD2012时,弹出错误1308,如图所示: 是何原因? 对CAD的运行有何影响?
- Ubuntu安装配置vsftpd
1. 安装 1. sudo apt-get install vsftpd 2. sudo apt-get install db4.8-util 用于创建虚拟用户 2. 创建用户 创建文 ...
- 排序sort与qsort
首先看sort函数见下表: 函数名 功能描述 sort 对给定区间所有元素进行排序 stable_sort 对给定区间所有元素进行稳定排序 partial_sort 对给定区间所有元素部分排序 par ...
- ACM经历与感悟合集
ACM经历与感悟合集 ACM起步要点总结(转哈工大) ACM 荣耀之路-学习方法 ACM感悟 一位ACMer过来人的心得 ACM经历总结 大学ACM的总结 ACM大牛的退役贴 各大牛退役总结帖 女生应 ...