vue 中对城市列表根据首字母进行排序

黄良钵

分类: 程序开发 84 0

vue 中对城市列表根据首字母进行排序

vue中根据城市的首字母a-z进行排序
先安装 js-pinyin 依赖:

npm i --save js-pinyin

然后在组件中引入:

import pyjs from 'js-pinyin'

export default {
  async mounted() {
    let city = [
      {
        name: '北京'
      },
      {
        name: '上海'
      },
      {
        name: '广州'
      },
      {
        name: '武汉'
      },
      {
        name: '浙江'
      },
      {
        name: '海口'
      }
    ] // 城市列表
    let blocks = [] // 新列表
    let p, c
    let d = {}
    
    city.forEach(item => {
      p = pyjs.getFullChars(item.name).toLocaleLowerCase().slice(0, 1)
      c = p.charCodeAt(0) // charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。
      if (c > 97 && c < 123) { // 小写的 a-z if (!d[p]) { d[p] = [] } d[p].push(item.name) } }) for(let [k, v] of Object.entries(d)) { blocks.push({ title: k.toUpperCase(), city: v }) } blocks.sort((a, b) => a.title.charCodeAt(0) - b.title.charCodeAt(0))
    console.log(blocks) // 得出结果
    
  }
  
}
  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
JavaScript、js、Vue、城市列表、排序

作者简介:黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “vue 中对城市列表根据首字母进行排序”

Loading...