<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进行代码排序的更多相关文章

  1. vscode写vue模板--代码片段

    Ctrl+Shift+P打开命令输入 snippet (打开用户代码片段) 在输入vue(选择代码片段的语言) 如果搜索不到,安装一个插件 vueHelper 如果搜索到复制粘贴以下代码 { &quo ...

  2. 团队开发前端VUE项目代码规范

    团队开发前端VUE项目代码规范 2018年09月22日 20:18:11 我的小英短 阅读数 1658   一.规范目的: 统一编码风格,命名规范,注释要求,在团队协作中输出可读性强,易维护,风格一致 ...

  3. vue+element拖动排序功能

    项目中老大心血来潮设计了一可以拖动达到排序的功能,感觉没什么用,但是没办法,实现吧! 这功能肯定不会手撸了,直接上插件 使用Sortable.js,对vue不友好,拖拽有时候乱跳;改用vuedragg ...

  4. Vue之数据排序加签

    这篇随笔小编给大家带来的是数据排序加签: 所谓数据加签,就是把数据进行加密再传给后端,这样保证数据的秘密性.不容易被修改和获取:排序就是根据公司要求对字段进行排序,有些公司会把字段根据a-z排序,有些 ...

  5. Vue.js 可排序列表 (Sortable & Searchable Tables) 组件

    可排序表格 (Sortable & Searchable Tables) 在网页和表单设计中非常常用.用户可以通过点击表头对将表格以该列做顺序或降序排列,也可以利用 Search Box 对表 ...

  6. 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 ...

  7. 重构仿vue社区代码

    半年前根据vue社区提供的开放api制作的vue社区,功能大部分和原vue社区一样,还一些功能没做完,项目是半年前做的,已经过了半年,当时因为公司一个项目打算要vue来重构,提取小试牛刀做了个dom试 ...

  8. 在vscode中使用eslint+prettier格式化vue项目代码 (转载)

    ESlint:javascript代码检测工具,可以配置每次保存时格式化js,但每次保存只格式化一点点,你得连续按住Ctrl+S好几次,才格式化好,自行体会~~ vetur:可以格式化html.标准c ...

  9. vue eslint 代码自动格式化

    vue-cli 代码风格为 JavaScript Standard Style 代码检查规范严格,一不小心就无法运行,使用eslint的autoFixOnSave可以在保存代码的时候自动格式化代码 V ...

随机推荐

  1. Netty-FastThreadLocal快在哪里呢?

    来源于:https://www.wangdaye.net/archives/n-e-t-t-y-zhi-f-a-s-t-t-h-r-e-a-d-l-o-c-a-l 前言 netty的concurren ...

  2. Using C++ in VS Code

    Using C++ in VS Code ‍ Get Started with C++ and Windows Subsystem for Linux in Visual Studio Code ‍ ...

  3. poi实现生成下拉选联动

    在我们实际的程序开发中,经常需要用到从excel导入数据中系统中,而为了防止用户在excel中乱输入文字,有些需要用到下拉选的地方,就需要从程序中动态生成模板.本例子简单的讲解一下,如何生成级联下拉选 ...

  4. 2021.8.19考试总结[NOIP模拟44]

    T1 emotional flutter 把脚长合到黑条中. 每个黑条可以映射到统一区间,实际操作就是左右端点取模.长度大于$k$时显然不合法. 然后检查一遍区间内有没有不被黑条覆盖的点即可. 区间端 ...

  5. 线路由器频段带宽是是20M好还是40M好

    无线路由器频段带宽还是40M好. 40M的信号强,速度快.   1.20MHz在11n的情况下能达到144Mbps带宽.穿透性不错.传输距离较远 40MHz在11n的情况下能达到300Mbps带宽.穿 ...

  6. CSP-S 2021 爆零记

    前言 本人今年高二蒟蒻OIer,高一刚刚接触OI. 感觉可能要直接退役了555~ 希望还有机会靠NOIP翻盘 Day - 暑假 为了备战CSP提前返校,与xzh一起划水,总之刷了不少题,我也大受震撼 ...

  7. Flink计算pv和uv的通用方法

    PV(访问量):即Page View, 即页面浏览量或点击量,用户每次刷新即被计算一次. UV(独立访客):即Unique Visitor,访问您网站的一台电脑客户端为一个访客.00:00-24:00 ...

  8. 直播预告|App 首页如何动态化更新?来看蚂蚁技术专家详解「支付宝」全新卡片技术栈

    立即前往直播间预约观看 从icon到card,一场内容前置化的变革 从 Windows 时代开始,应用程序图标就成为了用户(流量)的主入口,一直持续到移动端时代. 图标即入口的方式,虽然足够方便但却不 ...

  9. conda无法导入,pip可以导入

    在conda中创建测试的虚拟环境 进入test虚拟环境,输入命令:conda install keras 输入命令python,进入python环境,输入import keras 返回错误,No mo ...

  10. Java不同时区(timezone)之间时间转换

    最近出现一个问题是这样的:我们的系统在国外打印的日志时间由于时差关系和国内不一致,看起来不方便,希望国外的日志和国内保持一致,即:需要对不同时区的时间做转换调整,统一为国内时间. 一.关于时区的一些概 ...