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 ...
随机推荐
- TypeScript中将函数中的局部变量“导出”的方法
首先是在模块a.js中声明一个可导出(export)的数据结构,例如: export class ModelInfo{ id: string; name:string; } 其次是在模块b中声明可导出 ...
- javascript高级程序设计第三版书摘
在HTML 中使用JavaScript <script>元素 在使用<script>元素嵌入 JavaScript 代码时,只须为<script>指定 type 属 ...
- Spring中属性注入的几种方式以及复杂属性的注入详解
在spring框架中,属性的注入我们有多种方式,我们可以通过set方法注入,可以通过构造方法注入,也可以通过p名称空间注入,方式多种多样,对于复杂的数据类型比如对象.数组.List.Map.Prope ...
- SharkCTF2021 The_nature_of_the_human
(信安数基的quiz1写不出来 来这放题解泄愤) crypto类题. 题面 其加密的大致过程是,对明文flag中的逐个字符,随机使用三种加密方式: 第一种,对该字符进行sha256加密后以16进制形式 ...
- 【UE4 C++】 Datatable 读写、导入导出 CSV/Json
Datatable 读取行数据 1. 创建结构体 继承自 FTableRowBase USTRUCT(BlueprintType) struct FSimpleStruct :public FTabl ...
- 分布式表示(Distributed Representation)
NLP模型笔记 - 分布式表示 ziuno 2020-03-08 19:52:50 410 收藏 2 分类专栏: NLP 模型 笔记 文章标签: nlp 最后发布:2020-03-08 19:52:5 ...
- C语言教你写个‘浪漫烟花‘---特别漂亮
效果展示 动态图 总体框架 /***************************************** * 项目名称:浪漫烟花 * 项目描述:贴图 * 项目环境:vs2019 * 生成日期: ...
- RGB-YUV
1,RGB 1.1 RGB说明 RGB色彩模式是工业界的一种颜色标准,是通过对红(R).绿(G).蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即是代表红.绿.蓝三个通 ...
- 并发编程从零开始(十四)-Executors工具类
并发编程从零开始(十四)-Executors工具类 12 Executors工具类 concurrent包提供了Executors工具类,利用它可以创建各种不同类型的线程池 12.1 四种对比 单线程 ...
- java容器之HashMap
HashMap采用了数组和链表的数据结构,能在查询和修改方便继承了数组的线性查找和链表的寻址修改,数组是HashMap的主体,链表则是主要为了解决哈希冲突而存在的. 解决哈希冲突的三个方法: a.开放 ...