html5 a-z字母排序,Mint UI实现A-Z字母排序的城市选择列表
本文实例为大家分享了Mint Ul实现A-Z字母排序的城市选择列表的具体代码，供大家参考，具体内容如下
效果图如下：
项目文件存放路径图：
所有代码如下：
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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
html5 a-z字母排序,Mint UI实现A-Z字母排序的城市选择列表相关推荐
- 微信小程序手把手教你实现带字母索引的城市选择列表
微信小程序手把手教你实现带字母索引的城市选择列表 前言 需求分析 左边可滑动列表 滑动列表UI实现 item点击事件 右边带字母的索引条 索引条从上到下分别是定位和26个大写字母 索引条响应触摸和点击 ...
- 字符串排序（英文字母从 A 到 Z 排列，不区分大小写；同一个英文字母的大小写同时存在时，按照输入顺序排列）
#include <iostream> #include <string> #include <algorithm> #include <vector> ...
- 每一个值从a到z的顺序排序，若遇到相同首字母，则看第二个字母，以此类推
3.4安全码 计算安全码使用的算法 SHA1 3.4.1安全码原文 将所有"名值对"和APIKey拼接 名值对 APIKey key1=value1&key2=value2 ...
- mysql 实现按首字母字典序排序以及根据字段汉字首字母搜索
目录 mysql 实现按首字母字典序排序 mysql 根据字段汉字首字母搜索 mysql 实现按首字母字典序排序 mysql 一个表中的某一个字段存储的是人的名字 name 字符编码utf8_gene ...
- php根据汉字首字母分组,利用PHP获取汉字首字母并且分组排序详解
前言 本文主要给大家介绍了关于PHP获取汉字首字母并分组排序的相关内容,因经常我们在做项目的时候,会有按首字母排序的需求 比如: 美团的城市选择 http://www.meituan.com/inde ...
- 上拉加载_如何用Vue + Mint UI实现上拉加载更多
引言: 上拉加载更多在移动端不论是在 app 里面还是在页面中都是必不可少的,以下是 mint-ui 中上拉加载更多的总结. 一.在项目中使用 mint-ui 需要先安装 查看官网 (1)安装:npm ...
- js 根据汉字首字母排序（省份排序） 或 根据英文首字母排序——za排序 az排序
js 根据汉字首字母排序(省份排序) 或 根据英文首字母排序--z~a排序 & a~z排序 示例1 let arr = ["贵州省", "江苏省", & ...
- Python字母和数字的混合时按照数字排序
Python字母和数字的混合时按照数字排序 在实际工作中经常会遇到需要将带有字母和数字的字符串进行混合排序,在Python中并没有这种类似的参数,所以需要自己进行设置. import re# 将可以转 ...
- oracle 中文拼音取首字母,ORACLE依据中文拼音首字母排序、取得中文拼音首字母函数...
当前位置:我的异常网» 数据库 » ORACLE依据中文拼音首字母排序.取得中文拼音首字母 ORACLE依据中文拼音首字母排序.取得中文拼音首字母函数 www.myexceptions.net 网友 ...
最新文章
- 如果特斯拉制造相机的梦想像激光雷达一样真正实现，它可能会帮助到更多同行...
- 详解python中的用法_详解python中*号的用法
- CoSENT：比Sentence-BERT更有效的句向量方案
- python中以表示语块_scikitlearn：将数据拟合成块与将其全部拟合到on
- spring boot入门（九） springboot的过滤器filter。最完整、简单易懂、详细的spring boot教程。
- DCGAN：生成动漫头像
- 11，EasyNetQ-调度事件与定时发布
- vue cli element 项目结构
- Powershell基本命令总结（更新中）
- Jasmine基础API
- jaxen-1.1-beta-6.jar的用处
- 微信小程序--单行文本、多行文本溢出变省略号...
- Android 常用简单bat脚本
- 混合基金量化投资策略应该怎么制定？
- ubuntu18打开网页慢的问题
- 51单片机 独立按键k1控制数码管移位 k2控制数值加
- ReadingTime-十二月
- python3刷新监控网页_python - 如何不刷新网页而监控网页变化？
- 程序员玩‘附近的人’，妹子还没泡，先学会了个专业技能！
- 最快速的OpenCV安装教程