html5 a-z字母排序,Mint UI实现A-Z字母排序的城市选择列表

本文实例为大家分享了Mint Ul实现A-Z字母排序的城市选择列表的具体代码,供大家参考,具体内容如下

效果图如下:

1f1170b96e73d4ec48e0f274cb1f4ee9.gif

项目文件存放路径图:

ea1d74eb609b79539396ff646d783428.png

所有代码如下:

import city from "../assets/json/city"//导入所有城市的JSON

import { makePy } from "../assets/js/pinying"//导入插件获取所有城市中文的大写首字母

export default {

data () {

return {

arr: [],//存放初始筛选的城市名称

cityArr: [],//存放第二次筛选后所有城市名称

citySort: [],//存放初始获取城市首字母大写的数组

citySortArr: []//存放第二次筛选重复,不存在的城市首字母数组

};

},

created () {

/**

* 将json数据中的无用数据剔除

*/

for (let i in city) {

if (city[i].name != "请选择") {//将第一层数据中为 “请选择” 的剔除掉

this.arr.push(city[i].name);

for (let j in city[i].sub) {//将第二层数据中为 “请选择 和 其他” 的剔除掉

if (

city[i].sub[j].name != "请选择" &&

city[i].sub[j].name != "其他"

) {

this.arr.push(city[i].sub[j].name);//将处理后的数据存放在数组中,等待第二次筛选处理

}

}

}

}

/**

* 配置相关数据

*/

for (let k in this.arr) {

let cityKey = makePy(this.arr[k])[0].substring(0, 1);//获取每一个市区的首字母

let cityValue = this.arr[k];//获取所有市区

this.citySort[cityKey] = cityKey;//利用对象特性,剔除重复的字母,并将剔除后的字母存进对象中

//将所有市区信息 以( 字母 - 市区名 )的格式存在至数组中

this.cityArr[k] = {

key: cityKey,

value: cityValue

};

}

/**

* 将处理后的首字母数据对象,存放至数组中

*/

for (let p in this.citySort) {

this.citySortArr.push(this.citySort[p]);

}

/**

* 将真实存在的市区首字母按A-Z进行排序

*/

this.citySortArr = this.citySortArr.sort();

}

};

.mint-cell-title {

flex: 0 0 auto;

}

.mint-indexsection-index {

text-align: left;

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/555127.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Geometry几何结构与WKT空间坐标计算缓冲距离模型构建

geometry,英语单词,名词,意思是“几何学几何结构”。 http://www.baike.com/wiki/WKTWKT,是一种文本标记语言,用于表示矢量几何对象、空间参照系统及空间参照系统之间的转换。它的二进制表示方式,亦即WKB(…

html5开发之ios屏幕适配,iOS开发屏幕尺寸以及屏幕适配等问题(转载内容)

原帖地址:http://blog.csdn.net/phunxm/article/details/42174937/仅供我个人收藏学习,原博主如不同意请联系qq651263878进行删除,在此表示感谢以及歉意。1.iPhone尺寸规格后续上市的iPhone7以及iPhone7plus 与六代相同1 inch 2.54cm 25.4…

flink checkpoint 恢复_Flink解析 | Apache Flink结合Kafka构建端到端的ExactlyOnce处理

周凯波(宝牛)阿里巴巴技术专家,四川大学硕士,2010年毕业后加入阿里搜索事业部,从事搜索离线平台的研发工作,参与将搜索后台数据处理架构从MapReduce到Flink的重构。目前在阿里计算平台事业部,专注于基于Flink的一站式计…

Java通过ftl模板导出word最详细教程

首先用office建一个word文档 参数写自己查询出来的字段,我在这里房里图片是方便找到位置替换为64位编码 模板创建好之后,另存为Word 2003 XML文档(*.xml) 存储为别的可能会报错,我只用这一种 存储为xml之后千万不要用word打开,最…

封装html ui 控件,聊聊前端 UI 组件:组件设计

本文首发于欧雷流。由于我会时不时对文章进行补充、修正和润色,为了保证所看到的是最新版本,请阅读原文。在本系列文章《聊聊前端 UI 组件:组件体系》中初步说明了 UI 组件的架构设计,本文将在此基础上进一步展开说说那篇文章中一…

live555推流rtsp_Hi3518 RTSP推流

1、openssl编译下载地址:http://distfiles.macports.org/openssl/解压后进入源码根路径执行./config no-asm no-async --prefix/home/chenyc/project/hi3518e/Hi3518E_SDK_V1.0.3.0/armlib/openssl --cross-compile-prefixarm-hisiv300-linux-#打开生成的makefile 删除-m64 在…

怎么两边同时取ln_男生“两边铲光”发型out了?试试这4款吧,剪完清爽又帅气...

发型对于男生来说是特别重要的!女生可以通过化妆来让自己变得更完美,而男生想要改变自己的形象,是不敢轻易化妆的,只有通过改变自己的发型,才能更好地展现自己的魅力。现下男生最流行的发型,莫过于“两边铲…

ionic 修改组件默认样式_开源Magpie:组件库详解

开源项目专题系列(八)1.开源项目名称:magpie_fly2.github地址:https://github.com/wuba/magpie_fly3.简介:magpie_fly 是58集体出品组件库,统一管理日常开发中的基础组件及高阶组件,并提供了相对友好的方式介绍组件的具…

口袋之旅html5超强账号,口袋之旅特攻排行榜 强大的绝对能力

历史上是在金银版分了精灵的特攻物攻,在宝石版分了技能的特攻物攻,让很多精灵和技能得以重生。口袋之旅采用的是第二世代的精灵加第三世代的技能分类,于是特攻手也成为了一个需要挑选的部分,本文继续为你缩小挑选范围。特攻种族值…

使用ftl生成word

背景:根据word模板下载word。word里面需要填充数据,格式是固定的。首先在word中给数据起个变量名称 需要更换的数据改成${变量名!},必须是英文的,加感叹号是为了防止null,如果数据是null,文档下载下来后会直…

什么叫做项目孵化_蓝莓孵化营12进5争夺战,项目人绽放自我不留遗憾

国内首档互联网职业竞技励志节目《蓝莓孵化营》,今晚22点在浙江卫视播出第十一期。本期节目中,第三事业群的12组项目人将为最终的5张终极考核入场券展开争夺。这一次,他们比拼的是以“2020”为主题的短视频,每一组项目人都拼尽了自…

一开机就提示脱机工作_「华为手机维修自学教程」华为手机的开机触发电路 华为维修技巧...

谈谈华为的开机触发电路华为这段时间的新闻不少,大家应该都有说了解。华为的强大意味着华为手机的维修市场越来越大。从事维修的朋友们你们准备好了吗?今天给大家说一说,华为手机的开机触发电路。修苹果手机的朋友大家都知道,电源…

SpringBoot 整合mybatis-plus 高级功能及用法详解

springboot 整合mybatis-plus 高级功能及用法详解 学习并使用mybatis-plus的一些高级功能的用法例如&#xff1a; AR模式、 乐观锁 、逻辑删除 、自动填充、数据保护等功能 为了方便演示&#xff0c;咱们还是新建一个全新的项目 引入mp依赖 <dependency><groupId>…

8除以2表示什么意思_八字中劫财,比肩分别表示什么意思

◆◆比劫与其他十神的生克关系◆◆食伤&#xff1a;比劫生食伤财星&#xff1a;比劫克财星官星&#xff1a;官星克比劫印星&#xff1a;印星生比劫◆◆比劫帮身◆◆八字术语&#xff0c;比肩劫财均可助日干之力&#xff0c;如甲见甲(比)、乙(劫)、寅(禄)、卯(刃)之类&#xff0…

MyBatis-plus 自动填充MetaObjectHandler不生效问题

背景 在项目中经常遇到一些数据需要自动填充&#xff0c;填充方法都是同一种规则&#xff0c;例如创建时间等。 1 自动填充方法配置 1.1 实体类添加注解 1.2 在handler包下实现元对象处理器接口 import com.baomidou.mybatisplus.core.handlers.MetaObjectHandler; import o…

博途变量类型_PLC数据类型(UDT)

UDT类型是一种由多个不同数据类型元素组成的数据结构&#xff0c;元素可以是基本数据类型&#xff0c;也可以是STRUCT、数组等复杂数据类型以及其它UDT等。UDT类型嵌套UDT类型的深度限制为 8 级。UDT类型可以在DB、OB/FC/FB接口区处使用。从TIA 博途 V13SP1 开始&#xff0c;S7…

Mybatis-Plus条件参数查询手册

【引言】 使用mybatis-plus框架的基础上&#xff0c;直接使用其中的条件参数进行查询还是很方便的。但每次使用到像大于、不等于这样一些不常用条件时&#xff0c;都需要现查&#xff0c;所以记录在这篇博客里&#xff0c;当作一个自己的查询手册。 【手册】 查询方式说明se…

java 最快平衡几个值_Java 集合框架面试问题集锦

Java集合框架(例如基本的数据结构)里包含了最常见的Java常见面试问题。很好地理解集合框架&#xff0c;可以帮助你理解和利用Java的一些高级特性。下面是面试Java核心技术的一些很实用的问题。Q&#xff1a;最常见的数据结构有哪些&#xff0c;在哪些场景下应用它们&#xff1f…

mybatis-plus 如何判断参数是否为空并作为查询条件

判断参数是否为空并作为查询条件 Overridepublic Page<DemandEntity> selectByDepartmentDisplay(DemandEntity demandEntity) {EntityWrapper<DemandEntity> wrapper new EntityWrapper<DemandEntity>();wrapper.eq(!StringUtils.isNullOrEmpty(demandEnt…

linux 总数 进程_Linux运用一些常用命令,优秀的PHPer都需掌握

作为一名优秀的phper&#xff0c;Linux是必备的一项技能&#xff0c;工作3-5年的基本能明白我讲的道理&#xff01;今天搜集整理了一些Linux服务器运维常用命令,希望对大家有帮助&#xff1a;1.删除0字节文件find -type f -size 0 -exec rm -rf {} 2.查看进程按内存从大到小排列…