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

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 = this
    let 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)为90
        if (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>

城市展示效果图

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