数据排序--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 ...
随机推荐
- 【视频编解码·学习笔记】5. NAL Unit 结构分析
在上篇笔记中通过一个小程序,可以提取NAL Unit所包含的的字节数据.H.264码流中的每一个NAL Unit的作用并不是相同的,而是根据不同的类型起不同的作用.下面将对NAL Unit中的数据进行 ...
- oracle case when及decode的用法
case ... when 语句 1) CASE column_name WHEN value1 THEN resutl1,... [ ELSE result ] END select name , ...
- 基于Controller接口的控制器及简单应用
DispatcherServlet在Spring当中充当一个前端控制器的角色,它的核心功能是分发请求.请求会被分发给对应处理的Java类,Spring MVC中称为Handle.在Spring 2.5 ...
- Python函数可变参数*args及**kwargs详解
初学Python的同学们看到代码中类似func(*args, **kwargs)这样的函数参数定义时,经常感到一头雾水. 下面通过一个简单的例子来详细解释下Python函数可变参数*args及**kw ...
- ABP官方文档翻译 6.2.1 ASP.NET Core集成
ASP.NET Core 介绍 迁移到ASP.NET Core? 启动模板 配置 启动类 模块配置 控制器 应用服务作为控制器 过滤器 授权过滤器 审计Action过滤器 校验过滤器 工作单元Acti ...
- Go笔记-垃圾回收集和SetFinalizer
[垃圾回收] 1- Go的开发者也不用写代码来释放程序中不再使用的变量和结构占用内存,Go中有独立的进程,垃圾回收器(GC),处理这些事情.它会搜索不再使用的变量然后释放它们. 2- ...
- java中的各种Queue
java中的各种并发Queue可以归为以下的几种: ConcurrentLinkedQueue: 一个由链表结构组成的非阻塞队列 ArrayBlockingQueue :一个由数组结构组成的有界阻塞队 ...
- Redis 学习(三) —— 事务、消息发布订阅
一.Redis事务 Redis 提供的事务机制与传统的数据库事务有些不同,传统数据库事务必须维护以下特性:原子性(Atomicity), 一致性(Consistency),隔离性(Isolation) ...
- [Python Study Notes]CS架构远程访问获取信息--Client端v2.0
更新内容: 1.增加内存信息获取 2.增加电池信息获取 3.增加磁盘信息获取 4.重新布局窗体 5.增加窗体名称 6.增加连接成功之前,不可按压 效果图: '''''''''''''''''''''' ...
- golang验证提交的数据中某个字段是否重复
提交的json数据如下: { , , , ", , , "screen_mode": "3,2", , "ad_plats":[ ...