vue.js或js实现中文A-Z排序的方法

 更新时间:2018年03月08日 10:26:47   作者:silver_winter  
下面小编就为大家分享一篇vue.js或js实现中文A-Z排序的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

实现中文按照A-Z的方法,可以在vue的methods里面写入:

methods:{
        pySort:function(arr,empty){
          var $this = this;
          if(!String.prototype.localeCompare)
            return null;
          var letters = "ABCDEFGHJKLMNOPQRSTWXYZ".split('');
          var zh = "阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它穵夕丫帀".split('');
          var arrList = [];
          for(var m =0;m<arr.length;m++){
            arrList.push(arr[m].name);
          }
          var result = [];
          var curr;
          for(var i=0;i<letters.length;i++){
            curr = {letter: letters[i], data:[]};
            if(i!=26){
              for(var j =0;j<arrList.length;j++){
                var initial = arrList[j].charAt(0);//截取第一个字符
                if(arrList[j].charAt(0)==letters[i]||arrList[j].charAt(0)==letters[i].toLowerCase()){  //首字符是英文的
                  curr.data.push(arrList[j]);
                }else if(zh[i]!='*'&&$this.isChinese(initial)){   //判断是否是无汉字,是否是中文
                  if(initial.localeCompare(zh[i]) >= 0 &&(!zh[i+1]||initial.localeCompare(zh[i+1]) <0)) {  //判断中文字符在哪一个类别
                    curr.data.push(arrList[j]);
                  }
                }
              }
            }else{
              for(var k =0;k<arrList.length;k++){
                var ini = arrList[k].charAt(0);      //截取第一个字符
                if(!$this.isChar(ini)&&!$this.isChinese(ini)){
                  curr.data.push(arrList[k]);
                }
              }
            }
            if(empty || curr.data.length) {
              result.push(curr);
              //curr.data.sort(function(a,b){
              //  return b.localeCompare(a);    //排序,英文排序,汉字排在英文后面
              //});
            }
          }
          return result;
        },
        isChinese:function(temp){
          var re=/[^\u4E00-\u9FA5]/;
          if (re.test(temp)){return false;}
          return true ;
        },
        isChar:function(char){
          var reg = /[A-Za-z]/;
          if (!reg.test(char)){return false ;}
          return true ;
        }
       }

将从php中获取的json对象转换成数组,vue中直接调用->this.pySort(arr); js直接调用pySort(arr)方法即可    即可实现按照A-Z的格式排序

如下图在控制台输出的格式:

letter中存放键值A-Z

data:存放排序后的数组

至于vue中需要放在页面中,使用v-for循环即可 v-for="(key,value) in arr"

需要获取data数组的值,继续使用v-for="tmp in (key.data)"循环在你想输入摆放的元素中

写的比较简单,这个方法在js中也通用

希望这篇文章可以帮助到需要排序的亲~~~~

相关文章

  • Vue2响应式系统介绍

    Vue2响应式系统介绍

    这篇文章主要介绍了Vue2响应式系统,响应式系统主要实现某个依赖了数据的函数,当所依赖的数据改变的时候,该函数要重新执行,下文更多相关介绍需要的小伙伴可以参考一下
    2022-04-04
  • vue项目怎样用nginx反向代理WebSocket请求地址

    vue项目怎样用nginx反向代理WebSocket请求地址

    这篇文章主要介绍了vue项目怎样用nginx反向代理WebSocket请求地址问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-09-09
  • vue进度条组件实现代码(可拖拽可点击)

    vue进度条组件实现代码(可拖拽可点击)

    在日常开发中随着需求的个性化,逻辑的复杂化,自定义组件也变得越来越常见,这篇文章主要给大家介绍了关于vue进度条组件实现(可拖拽可点击)的相关资料,需要的朋友可以参考下
    2023-12-12
  • Vue实现导出word文档的示例详解

    Vue实现导出word文档的示例详解

    这篇文章主要为大家详细介绍了Vue如何使用第三方库file-saver和html-docx-js实现导出word文档的效果,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-02-02
  • 从eleUI的Loading知道了单例模式的用法

    从eleUI的Loading知道了单例模式的用法

    这篇文章主要介绍了从eleUI的Loading知道了单例模式的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • 在vue项目中使用sass语法问题

    在vue项目中使用sass语法问题

    sass是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。这篇文章主要介绍了在vue项目中使用sass语法,需要的朋友可以参考下
    2019-07-07
  • vue页面更新patch的实现示例

    vue页面更新patch的实现示例

    这篇文章主要介绍了vue页面更新patch的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • Vue select 绑定动态变量的实例讲解

    Vue select 绑定动态变量的实例讲解

    这篇文章主要介绍了Vue select 绑定动态变量的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue后台返回格式为二进制流进行文件的下载方式

    vue后台返回格式为二进制流进行文件的下载方式

    这篇文章主要介绍了vue后台返回格式为二进制流进行文件的下载方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • 关于Less在Vue中的使用方法介绍

    关于Less在Vue中的使用方法介绍

    最近发现好多小伙伴在面试的过程中会问到vue如何使用less和scss,所以下面这篇文章主要给大家介绍了关于Less在Vue中的使用方法,需要的朋友可以参考下
    2023-10-10

最新评论