npm包-js-pinyin获取中文拼音,实现按26个首字母展示城市

npm安装js-pinyin
vue实现代码
城市展示效果图

你越是认真生活，你的生活就会越美好——弗兰克·劳埃德·莱特
《人生果实》经典语录

js-pinyin

npm安装js-pinyin

npm install js-pinyin

vue实现代码

获取下面的格式,26个首字母对应的城市

[{"title":"A", "city": ["阿拉善盟", "安阳市", "安庆市"]},{"title":"B", "city": ["北京市", "包头市", "白城市", ...]},...
]

<template><div class=""><dl class="m-categroy"><dt>按拼音首字母选择:</dt><dd v-for="item in list" :key="item"><a :href="'#city-' + item">{{item}}</a></dd></dl><dl v-for="item in block" :key="item.title" class="m-categroy-section"><dt :id="'city-' + item.title">{{item.title}}</dt><dd><span v-for="c in item.city" :key="c">{{c}}</span></dd></dl></div>
</template><script>
import pyjs from 'js-pinyin'
// pyjs.getFullChars('汕头') // ShanTou 返回中文全拼 首字母大写export default {data() {return {list: "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split(""),block: [{title:"A", city:["安徽"]}]};},async mounted() {let _this = thislet blocks = []let {status, data:{city}} = await _this.$axios.get('/geo/city')if (status === 200) {// p存城市首字母let p // 存首字母code值 用来排序let c // 保存每个拼音字母对应的城市数组let d = {}console.log(city)city.forEach(item => {// pyjs.getFullChars('汕头') // ShanTou 返回中文全拼 首字母大写console.log("pyjs.getFullChars('item.name'):" + pyjs.getFullChars(item.name))p = pyjs.getFullChars(item.name).toLowerCase().slice(0, 1)c = p.charCodeAt(0)// 'a'.charCodeAt(0)为97 'z'.charCodeAt(0)为122// 'A'.charCodeAt(0) 为65 'Z'.charCodeAt(0)为90if (c>96 && c<123) {if(!d[p]) {d[p] = []} else {d[p].push(item.name)}}})for(let[k, v] of Object.entries(d)) {blocks.push({title: k.toUpperCase(),city: v})}_this.block = blocks.sort((a, b) => a.title.charCodeAt(0) - b.title.charCodeAt(0))}}
};
</script><style lang="scss">
@import "@/assets/css/changeCity/categroy.scss";
</style>

城市展示效果图

谢谢你阅读到了最后~
期待你关注、收藏、评论、点赞~
让我们一起变得更强

npm包-js-pinyin获取中文拼音,实现按26个首字母展示城市相关推荐

php获取中文拼音（含生僻字）支持首字母，全拼
此文为基础篇-优势在于速度更快,无依赖第三方库.如需更多功能可参考进阶篇进阶篇支持多音字,音标 php获取中文拼音(含生僻字,多音字,音标)支持首字母,全拼 /*** 中文转拼音 (utf8版,g ...
java获取中文的拼音以及获取中文拼音的首字母
首先在pom文件中引入依赖 pinyin4j <dependencies><dependency><groupId>com.belerweb</groupId ...
php获取中文拼音（含生僻字,多音字,音标）支持首字母，全拼
前面文章有提到php获取中文拼音的解决方案,文章链接如下该方法的优势在于速度够快,不依赖于任何第三方库.但不支持多音字以及音标的获取,现在将借助第三方库解决这个问题上一篇地址 php获取中文拼音( ...
java怎么获取中文首字母_Java如何获取中文拼音首字母的方法介绍
下面小编就为大家带来一篇java获取中文拼音首字母的实例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧如下所示: import net.sourceforge.pin ...
java 拼音首字母_java获取中文拼音首字母的实例
导读热词正文如下所示: import net.sourceforge.pinyin4j.PinyinHelper; public class PinyinHelperUtil { /** * 得到 ...
Java获取中文拼音、中文首字母缩写和中文首字母
我们有时候会遇到这样的情况,需要获取某些中文的拼音.中文首字母缩写和中文首字母,下面我将为大家介绍一下如何获取中文拼音的缩写. 1.项目建立和配置首先,我们建立一个java项目,新建libs文件夹并 ...
Pinyin4j获取中文拼音
1. 简单介绍有时候,需要将汉字编程对应的拼音,以方便数据的处理.比如在Android手机应用的开发上,要查询联系人的姓名,通常都是用拼音进行查询的.比如要查询"曹孟德" ...
把中文目录名称修改成英文首字母大写或中文拼音目录
把中文目录名称修改成英文首字母大写或英文目录 <dependency><groupId>cn.hutool</groupId><artifactId>h ...
全国省市区数据库-拼音-首字母-经纬度-城市编码-邮编-简称-组合称
全国省市区数据库-拼音-首字母-经纬度-城市编码-邮编-简称-组合称全国省市区数据库-拼音-首字母-经纬度-城市编码-邮编-简称-组合称 MySql转储文件,Excel数据文档全国省市区数据库-拼 ...

npm包-js-pinyin获取中文拼音,实现按26个首字母展示城市

npm包-js-pinyin获取中文拼音,实现按26个首字母展示城市

npm安装js-pinyin

vue实现代码

城市展示效果图

npm包-js-pinyin获取中文拼音,实现按26个首字母展示城市相关推荐

最新文章

热门文章