数据排序--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 ...
随机推荐
- nodejs爬虫笔记(四)---利用nightmare解决加载更多问题
目标: 解决页面加载更多问题.笔记三中,我们只爬取到网页的部分信息,而点击加载更多后的页面内容是没有提取到的.开始我的想法是找到加载更多的数据接口(可参照:http://www.jianshu.com ...
- 汉诺塔python3函数编写和过程分析
!/usr/bin/env python3 -- coding: utf-8 -- 利用递归函数计算阶乘 N! = 1 * 2 * 3 * ... * N def fact(n): if n == 1 ...
- matlab输入输出语句（input、disp、fprintf）
输入语句 输入数值 ?x=input('please input a number:') please input a number:22 x = 22 输入字符串 ?x=input('please ...
- iOS 设置文本中指定某段文本的颜色 大小
NSString *money = @"300"; NSString *perStr = @"元/时"; NSString *text = [NSString ...
- C语言预处理 编译 汇编 链接四个阶段
c程序(源代码)转换成可以在硬件上运行的程序(可执行代码),需要进行编译和链接. 编译过程 编译过程又可以分成两个阶段:编译和会汇编. 编译 编译是读取源程序(字符流),对之进行词法和语法的分析,将高 ...
- VUE-脚手架搭建
1.什么vue-cli vue-cli是vue.js的脚手架,用于自动生成vue.js工程模板的. 步骤: 2.安装 ->全局安装 npm install vue-cli -g 或 ...
- CORS跨域请求之简单请求与非简单请求
先来看一个例子 定义server01的项目,在路由表中添加一条路由记录 url(r'^getData.html$',views.get_data) 对应的视图函数 from django.shortc ...
- ABP官方文档翻译 4.5 特征管理
特征管理 介绍 关于IFeatureValueStore 特征类型 Boolean特征 Value特征 定义特征 基本特征属性 其他特征属性 特征层级 检查特征 使用RequiresFeature特性 ...
- ContextLoaderListener加载过程
在web.xml中,配置ContextLoaderListener <!-- 配置Listener,用来创建Spring容器 --> <listener> <listen ...
- asp.net 文件上传 Uploadify HTML5 带进度条
参考的https://www.cnblogs.com/lvdabao/p/3452858.html这位,在此基础上略有修改: 1.根据Layer,将上传附件做成弹窗显示,引入frame弹窗,在项目当中 ...