数据排序--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 ...
随机推荐
- 【转】How to append current date and timestamp to filename in shell script
$ date +"FORMAT" now=$(date +"%Y-%m-%d-%S") filename="my_program.$now.log&q ...
- Effective Java 之-----精确的答案与double&float
题目: 假设你口袋里有1$,看到货架上有一排美味的糖果,标价分别为0.10$,0.20$,0.30$...1$,你打算从标价为0.10$的糖果开始买起,每种买一颗,一直到不能支付货架上下一种价格的糖果 ...
- BZOJ 1845: [Cqoi2005] 三角形面积并 [计算几何 扫描线]
1845: [Cqoi2005] 三角形面积并 Time Limit: 3 Sec Memory Limit: 64 MBSubmit: 1151 Solved: 313[Submit][Stat ...
- c语言中的register int
register int a=1; 明确声明必须要把变量存放在寄存器中,直到变量消失. 一般是默认register,大多数的情况下是不用写register
- LeetCode - 520. Detect Capital
Given a word, you need to judge whether the usage of capitals in it is right or not. We define the u ...
- Windows 定时任务对数据库进行操作
定时对数据库进行操作可以用mysql的event事件来完成,但是只有mysql5.1后的才支持,所以有一定的局限性,也可以通过其他的mysql管理软件实现,而我发现Windows本身就有个定时任务的功 ...
- JSP的几种跳转方式的异同
1 <jsp:foward page="url" /> 服务端跳转,立即跳转,后续语句不会执行: 2 <% response.sendRedirect(" ...
- iptables snat和dnat
iptables中的snat和dnat是非常有用的,感觉他们二个比较特别,所以单独拿出来说一下. dnat是用来做目的网络地址转换的,就是重写包的目的IP地址.如果一个包被匹配了,那么和它属于同一个流 ...
- python学习：简单的wc命令实现
#!/usr/bin/python import sys import os try: fn = sys.argv[1] except IndexError: print &q ...
- prop&attr区别和用法,以多选框为例
1.比较 相同点 : prop和attr作为jquery的方法都可以获取属性值; 不同点 : (1) 对于HTML元素本身就带有的固有属性,使用prop方法, attr获取checkbox的check ...