<!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的更多相关文章

  1. Vue之数据排序加签

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

  2. 05-商品类别数据和VUE展示

    一.商品类别数据和VUE展示 1.商品类别数据接口 将商品类别数据展示出来,视图(views.py)代码如下: class CategoryViewset(mixins.ListModelMixin, ...

  3. .NET LINQ 数据排序

    数据排序      排序操作按一个或多个特性对序列的元素进行排序. 第一个排序条件对元素执行主要排序. 通过指定第二个排序条件,可以对各个主要排序组中的元素进行排序.   方法 方法名 说明 C# 查 ...

  4. SSIS 对数据排序

    SSIS 对数据排序有两种方式,一种是使用Sort组件,一种是使用sql command的order by clause进行排序. 一,使用Sort组件进行排序 SortType:升序 ascendi ...

  5. 阿里云377秒完成100TB数据排序：秒三星百度

    阿里云377秒完成100TB数据排序:秒三星百度 今日,Sort Benchmark 在官方网站公布了 2015 年排序竞赛的最终成绩.其中,阿里云用不到 7 分钟(377 秒)就完成了 100TB ...

  6. Python学习_数据排序方法

    Python对数据排序又两种方法: 1. 原地排序:采用sort()方法,按照指定的顺序排列数据后用排序后的数据替换原来的数据(原来的顺序丢失),如: >>> data1=[4,2, ...

  7. SQL从入门到基础 - 04 SQLServer基础2（数据删除、数据检索、数据汇总、数据排序、通配符过滤、空值处理、多值匹配）

    一.数据删除 1. 删除表中全部数据:Delete from T_Person. 2. Delete 只是删除数据,表还在,和Drop Table(数据和表全部删除)不同. 3. Delete 也可以 ...

  8. DataSet 中的数据排序 及 DataRow装成DataTable

    1.DataSet 中的数据排序 DataSet ds = new DataSet(); // 获取当前排口的数据 ds = _xiaobill.GetHistoryData(yinZiBianm, ...

  9. dplyr 数据操作 数据排序 (arrange)

    在R中,我们在整理数据时,经常需要对数据排序,以便数据增强数据的可读性. 下面我们来看下dplyr中的,arrange函数 arrange(.data, ...) 跟filter()类似,arrang ...

随机推荐

  1. 【转】centos安装vim7.4

    centos安装vim7.4   系统版本centos6.4; root权限 su - root     卸载 $ rpm -qa | grep vim $ yum remove vim vim-en ...

  2. JDK及Tomcat集成到MyEclipse

    JDK及Tomcat集成到MyEclipse 1.安装好MyEclipse 2.破解 3.配置环境JDK D:\jdk1.6.0_21\bin; ==>放在系统path前面 4.打开MyEcli ...

  3. JAVA List根据字段排序以及取前几条数据

    1.经常会遇到对组装的list排序或提取list中前几条数据,例如: 根据时间排序: list.sort((o1, o2) -> o2.getCreateTime().compareTo(o1. ...

  4. MySQL操作的一些优化

    1.用于不要使用select * from table xxx. 需要查询哪些列就在语句中指明,一个表结构复杂时,可能会有上百列,使用*来查询时会造成很大的浪费. 2.选择合适的属性及大小    例如 ...

  5. hdu 4609 3-idiots [fft 生成函数 计数]

    hdu 4609 3-idiots 题意: 给出\(A_i\),问随机选择一个三元子集,选择的数字构成三角形的三边长的概率. 一开始一直想直接做.... 先生成函数求选两个的方案(注意要减去两次选择同 ...

  6. Phalcon调试大杀器之phalcon-debugbar安装

    Phalcon 是一款非常火的高性能C扩展php开发框架.特点是高性能低耦合,但遗憾的是长期缺少一款得力的调试辅助工具. 目前版本主要以Laravel debugbar的具有功能为蓝本开发,并针对ph ...

  7. fifteen-puzzle

    http://www.math.ubc.ca/~cass/courses/m308-02b/projects/grant/fifteen.html http://jamie-wong.com/2011 ...

  8. 从此不再担心键盘遮住输入框OC(一)

    文/Jiar_(简书作者)原文链接:http://www.jianshu.com/p/48993ff982c1著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 新版本在这里:从此不再担心 ...

  9. LNMP搭建02 -- 编译安装Nginx

    [编译安装Nginx]   为了顺利安装Nginx,先安装下面这些: [CentOS 编译 nginx 前要做的事情] yum install gcc gcc-c++ kernel-devel yum ...

  10. PS图片去色

    快捷键:Ctrl+Shift+U 或者:图像-调整-去色