vue进行代码排序
<template> <div>
<div>
<h3>排序
</h3>
<button @click="orderByAge(0)">默认</button>
<button @click="orderByAge(2)">升序</button>
<button @click="orderByAge(1)">降序</button>
</div>
<h3>搜索列表</h3>
<input type="text" v-model="searchName" placeholder="请输入名字"> <ul>
<li v-for="(p,index) in fileterPersons">
{{index}} --{{p.name}}--{{p.age}}
</li>
</ul>
</div>
</template>
<script>
export default{
name:"list",
data(){
return {
orderType:0,
searchName:'',
persons:[
{name:'张三',age:18,sex:'男'},
{name:'李四2',age:128,sex:'男'},
{name:'王五',age:138,sex:'男'},
{name:'赵六',age:148,sex:'男'},
{name:'田七',age:158,sex:'男'},
{name:'邢八',age:168,sex:'男'},
{name:'高久',age:178,sex:'男'}, ],
}
}, methods:{
orderByAge(orderType)
{
this.orderType=orderType;
}
},
computed:{
//过滤的
fileterPersons(){
//ordertype传过来
let {searchName,persons,orderType}=this;
let arr=[...persons];
//
if(searchName.trim()){
arr=persons.filter((p)=>(p.name.indexOf(searchName)!==-1));
}
//排序
if(orderType){
arr.sort((p1,p2)=>{
if(orderType===1){//1为降序
return p2.age-p1.age;
}else{
return p1.age-p2.age;
} });
}
return arr;
}
},
}
</script>
<style scoped> </style>
vue进行代码排序的更多相关文章
- vscode写vue模板--代码片段
Ctrl+Shift+P打开命令输入 snippet (打开用户代码片段) 在输入vue(选择代码片段的语言) 如果搜索不到,安装一个插件 vueHelper 如果搜索到复制粘贴以下代码 { &quo ...
- 团队开发前端VUE项目代码规范
团队开发前端VUE项目代码规范 2018年09月22日 20:18:11 我的小英短 阅读数 1658 一.规范目的: 统一编码风格,命名规范,注释要求,在团队协作中输出可读性强,易维护,风格一致 ...
- vue+element拖动排序功能
项目中老大心血来潮设计了一可以拖动达到排序的功能,感觉没什么用,但是没办法,实现吧! 这功能肯定不会手撸了,直接上插件 使用Sortable.js,对vue不友好,拖拽有时候乱跳;改用vuedragg ...
- Vue之数据排序加签
这篇随笔小编给大家带来的是数据排序加签: 所谓数据加签,就是把数据进行加密再传给后端,这样保证数据的秘密性.不容易被修改和获取:排序就是根据公司要求对字段进行排序,有些公司会把字段根据a-z排序,有些 ...
- Vue.js 可排序列表 (Sortable & Searchable Tables) 组件
可排序表格 (Sortable & Searchable Tables) 在网页和表单设计中非常常用.用户可以通过点击表头对将表格以该列做顺序或降序排列,也可以利用 Search Box 对表 ...
- webstorm添加*.vue文件代码提醒支持webstorm支持es6vue里支持es6写法
本文转自:http://www.lred.me/2016/01/07/webstorm%E6%B7%BB%E5%8A%A0-vue%E6%96%87%E4%BB%B6%E6%94%AF%E6%8C%8 ...
- 重构仿vue社区代码
半年前根据vue社区提供的开放api制作的vue社区,功能大部分和原vue社区一样,还一些功能没做完,项目是半年前做的,已经过了半年,当时因为公司一个项目打算要vue来重构,提取小试牛刀做了个dom试 ...
- 在vscode中使用eslint+prettier格式化vue项目代码 (转载)
ESlint:javascript代码检测工具,可以配置每次保存时格式化js,但每次保存只格式化一点点,你得连续按住Ctrl+S好几次,才格式化好,自行体会~~ vetur:可以格式化html.标准c ...
- vue eslint 代码自动格式化
vue-cli 代码风格为 JavaScript Standard Style 代码检查规范严格,一不小心就无法运行,使用eslint的autoFixOnSave可以在保存代码的时候自动格式化代码 V ...
随机推荐
- SpringBoot-自动装配2
配置文件到底能写什么?怎么写? SpringBoot官方文档中有大量的配置,直接去记忆的话,好像不是我们程序员的行事风格! 分析自动配置原理 能自动配置的组件一般都有命名为下面规则的两个类: xxxx ...
- TypeError: Restaurant() takes no arguments
1. 错误描述 TypeError: Restaurant() takes no arguments 2. 原因:在编写__init__时,pycharm会自动添加关键字,有时会直接写称整型int, ...
- 【Java虚拟机9】类加载器之命名空间详解
前言 前面介绍类加载器的时候,介绍了一下命名空间这个概念.今天就通过一个例子,来详细了解一下[类加载器的命名空间].然后通过这个例子,我们可以总结一下双亲委托模型的好处与优点. 例1(不删除class ...
- Linux搭建SVN服务器详细教程
前言 本文讲解Linux系统下如何搭建SVN服务器,详细说明各配置项的功能,最终实现可管控多个项目的复杂配置. SVN是subversion的缩写,是一个开放源代码的版本控制系统,通过采用分支管理系统 ...
- .NET CLI简单教程和项目结构
WHAT IS .NET CLI ? .NET 命令行接口 (CLI) 工具是用于开发.生成.运行和发布 .NET 应用程序的跨平台工具链. 来源:.NET CLI | Microsoft Docs ...
- Beta发布声明
项目 内容 这个作业属于哪个课程 2021春季软件工程(罗杰 任健) 这个作业的要求在哪里 Beta-发布声明 我们是谁 删库跑路对不队 我们在做什么 题士 进度如何 进度总览 一.功能与特性 1.一 ...
- Seata的一些概念
Seata的一些概念 一.什么是seata 二.AT模式的介绍 1.前提条件 2.整体机制 3.读写隔离的实现 1.写隔离 2.读隔离 三.事务分组 1.事务分组是什么? 2.通过事务分组如何找到后端 ...
- 升级MySQL8.0的历险记
最近忙于Fighting的项目,所以笔耕有些松懈,实为不该. 刚好遇到需要从MySQL5.7.33升级到MySQL8.0.x的需求,于是记录一下整个升级过程,踩坑而过. 背景梗概:本地docker容器 ...
- Java 将Word保存为WPS和WPT格式
本文通过Java示例展示将Word文档(如.doc/.docx)保存为WPS和WPT格式的方法. 程序环境配置 IntelliJ IDEA 2018(jdk 1.8.0) Word Jar包:Spir ...
- 关于string转换为wstring问题
方法一:需要调用windows的api函数进行转换,在vs2017上试验转换成功 #ifdef _MSC_VER #include <Windows.h> #endif // _MSC_V ...