当前位置：首页 > VUE

vue实现字母添加排序

2026-03-06 19:08:45VUE

实现字母添加排序的方法

在Vue中实现字母添加排序功能，可以通过以下步骤完成。该功能通常用于联系人列表、城市选择等场景，按字母顺序排列数据并支持动态添加新项。

数据准备与排序

准备一个包含字母属性的数组，使用computed属性实现自动排序：

data() {
  return {
    items: [
      { name: 'Apple', initial: 'A' },
      { name: 'Banana', initial: 'B' },
      { name: 'Cherry', initial: 'C' }
    ],
    newItem: ''
  }
},
computed: {
  sortedItems() {
    return [...this.items].sort((a, b) => 
      a.initial.localeCompare(b.initial)
    )
  }
}

添加新项目的方法

创建方法处理新项目的添加，确保自动触发排序：

vue实现字母添加排序

methods: {
  addItem() {
    if (!this.newItem) return

    const initial = this.newItem.charAt(0).toUpperCase()
    this.items.push({
      name: this.newItem,
      initial: initial
    })
    this.newItem = ''
  }
}

模板部分实现

在模板中实现添加表单和排序列表展示：

<div>
  <input v-model="newItem" @keyup.enter="addItem" placeholder="输入新项目">
  <button @click="addItem">添加</button>

  <ul>
    <li v-for="item in sortedItems" :key="item.name">
      {{ item.initial }} - {{ item.name }}
    </li>
  </ul>
</div>

按字母分组显示

如需实现更复杂的分组显示（如通讯录样式），可修改计算属性：

vue实现字母添加排序

computed: {
  groupedItems() {
    return this.sortedItems.reduce((groups, item) => {
      const letter = item.initial
      if (!groups[letter]) {
        groups[letter] = []
      }
      groups[letter].push(item)
      return groups
    }, {})
  }
}

对应的模板调整为：

<div v-for="(group, letter) in groupedItems" :key="letter">
  <h3>{{ letter }}</h3>
  <ul>
    <li v-for="item in group" :key="item.name">
      {{ item.name }}
    </li>
  </ul>
</div>