数据排序--vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dome</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
</head>
<body>
<div id="box">
<button @click='click("id")'>id</button>
<button @click='click("yw")'>yw</button>
<button @click='click("sx")'>sx</button>
<button @click='click("name")'>name</button>
<button @click='click1("ip")'>ip</button>
<ul v-for="item in msg">
<li>name:{{item.name}}</li>
<li>id:{{item.id}}</li>
<li>yw:{{item.yw}}</li>
<li>sx:{{item.sx}}</li>
<li>ip:{{item.ip}}</li>
</ul>
</div>
</body>
<script>
new Vue({
el:'#box',
data() {
return {
msg:[
{name:'张三',id:1,yw:'96',sx:'98',ip:'192.168.0.100'},
{name:'李四',id:3,yw:'93',sx:'61',ip:'192.168.0.15'},
{name:'王五',id:4,yw:'87',sx:'9',ip:'192.168.0.220'},
{name:'赵六',id:2,yw:'55',sx:'66',ip:'192.168.0.80'}
],
f:true
}
},
methods: {
click1(a){
this.f=!this.f
var o=this.f?1:-1
let compare = (item1, item2) => {
var n1=item1[a].split('.').map(x => parseInt(x))
var n2=item2[a].split('.').map(x => parseInt(x))
for (let i = 0; i <4; i++) {
if(n1[i] === n2[i]) {
continue
} else {
if(o<0) {return n1[i] > n2[i]?1:-1}
return n1[i] < n2[i]?1:-1
}
}
}
return this.msg.sort(compare)
},
click(a){
this.f=!this.f
var o=this.f?1:-1
this.sortBy(this.msg,a,o)
},
sortBy:function(n,field,order){
let compare = (item1, item2) => {
if(/[\u4E00-\u9FA5]/g.test(item1[field])){
return (item1[field]).localeCompare(item2[field])
}else if(/^[0-9]+$/g.test(item1[field])&&/^[0-9]+$/g.test(item2[field])){
return parseInt(item1[field]) < parseInt(item2[field])?1:-1
}else{
return item1[field] < item2[field]?1:-1
}
}
if (order < 0) {
compare = (item1, item2) => {
if(/[\u4E00-\u9FA5]/g.test(item1[field])){
return (item2[field]).localeCompare(item1[field])
}else if(/^[0-9]+$/g.test(item1[field])&&/^[0-9]+$/g.test(item2[field])){
return parseInt(item2[field]) < parseInt(item1[field])?1:-1
}else{
return item2[field] < item1[field]?1:-1
}
}
}
return n.sort(compare)
}
}
})
</script>
</html>
数据排序--vue的更多相关文章
- Vue之数据排序加签
这篇随笔小编给大家带来的是数据排序加签: 所谓数据加签,就是把数据进行加密再传给后端,这样保证数据的秘密性.不容易被修改和获取:排序就是根据公司要求对字段进行排序,有些公司会把字段根据a-z排序,有些 ...
- 05-商品类别数据和VUE展示
一.商品类别数据和VUE展示 1.商品类别数据接口 将商品类别数据展示出来,视图(views.py)代码如下: class CategoryViewset(mixins.ListModelMixin, ...
- .NET LINQ 数据排序
数据排序 排序操作按一个或多个特性对序列的元素进行排序. 第一个排序条件对元素执行主要排序. 通过指定第二个排序条件,可以对各个主要排序组中的元素进行排序. 方法 方法名 说明 C# 查 ...
- SSIS 对数据排序
SSIS 对数据排序有两种方式,一种是使用Sort组件,一种是使用sql command的order by clause进行排序. 一,使用Sort组件进行排序 SortType:升序 ascendi ...
- 阿里云377秒完成100TB数据排序：秒三星百度
阿里云377秒完成100TB数据排序:秒三星百度 今日,Sort Benchmark 在官方网站公布了 2015 年排序竞赛的最终成绩.其中,阿里云用不到 7 分钟(377 秒)就完成了 100TB ...
- Python学习_数据排序方法
Python对数据排序又两种方法: 1. 原地排序:采用sort()方法,按照指定的顺序排列数据后用排序后的数据替换原来的数据(原来的顺序丢失),如: >>> data1=[4,2, ...
- SQL从入门到基础 - 04 SQLServer基础2（数据删除、数据检索、数据汇总、数据排序、通配符过滤、空值处理、多值匹配）
一.数据删除 1. 删除表中全部数据:Delete from T_Person. 2. Delete 只是删除数据,表还在,和Drop Table(数据和表全部删除)不同. 3. Delete 也可以 ...
- DataSet 中的数据排序 及 DataRow装成DataTable
1.DataSet 中的数据排序 DataSet ds = new DataSet(); // 获取当前排口的数据 ds = _xiaobill.GetHistoryData(yinZiBianm, ...
- dplyr 数据操作 数据排序 (arrange)
在R中,我们在整理数据时,经常需要对数据排序,以便数据增强数据的可读性. 下面我们来看下dplyr中的,arrange函数 arrange(.data, ...) 跟filter()类似,arrang ...
随机推荐
- SQL语句-delete语句
delete语句 delete语句用于删除表中已经存在的整行数据 Tbl_name关键词代表删除数据的目标表 Where子句代表被删除数据的满足条件,如果没有where子句则代 表所有表数据都删除 O ...
- MySQL相关文档索引
MySQL的新功能5.7 https://dev.mysql.com/doc/refman/5.7/en/mysql-nutshell.html MySQL5.7安装 http://note.youd ...
- JS-使用工厂方法创建对象
function createPerson(name,age,gender){ //创建新对象 var obj=new Object(); //向对象中添加属性 obj.name=name; obj. ...
- 跳转语句Break、continue
跳转语句Break.continue 1.break -跳出 作用范围:switch或循环语句; -当break语句单独存在时,下面不需要定义其他语句,因为直接被跳出,不执行下面的语句. -break ...
- 文件无法删除java.io.IOException: Unable to delete
疑问:1.为什么调用file.delete()方法时,返回值为false. 2.为什么调用Guava工具jar包中的Files.move(from,to) ,报异常:java.io.IOExcepti ...
- jsBOM内容
正如我们所知道的,javascript分为三大块,ECMAscript,BOM,DOM,ECMAscript固然重要:可是在web中使用ECMAscript很大程度上需要了解BOM即浏览器对象模型,否 ...
- sphinx的再创造coreseek的安装过程
CoreSeek详细安装过程:coreseek-3.2.14.tar.gz下载链接: http://pan.baidu.com/s/1o6DNesE 解压缩安装mmseg分词程序: .tar.gz c ...
- 解决mysql、vsftp远程连接速度慢的问题
以 centOS 6.3(其他操作系统类似,同样适用)说明: 当我们的服务都配置正常的情况下,有时会出现连接速度慢而导致连接失败的问题 问题分析:这些情况一般都是DNS解析惹的祸 mysql连接速度慢 ...
- 好用的开源库（二）——uCrop 图片裁剪
最近想要实现图片裁剪的功能,在Github上找到了这个uCrop,star的人挺多的,便是决定入坑,结果长达一个小时的看资料+摸索,终于是在项目中实现了图片裁剪的功能,今天便是来介绍一下uCrop的使 ...
- bzoj 4873: [Shoi2017]寿司餐厅 [最小割]
4873: [Shoi2017]寿司餐厅 题意:略 唯一会做的... 一眼最小割 就是最大权闭合子图呀 \(s\rightarrow d_{positive} \rightarrow -d_{negt ...