如何将数组按热门、字母两种顺序输出并在Vue中渲染？

步骤1：新增排序状态变量 #

在组件的data中新增排序类型控制字段：

data() {
  return {
    // 可选值：alphabet 字母序，hot 热门序
    sortType: 'alphabet',
    // 原始品牌分组数据保持不变
    groupBrands: [/* 你原有的数据 */]
  }
}

步骤2：新增计算属性处理排序逻辑 #

添加计算属性根据当前排序类型输出对应结构的品牌数据：

computed: {
  displayBrands() {
    if (this.sortType === 'alphabet') {
      // 字母序直接返回原分组结构，可按需加内部字母排序逻辑
      return this.groupBrands.map(group => {
        return {
          ...group,
          // 分组内按品牌名首字母排序
          brands: group.brands.sort((a,b) => a.title.localeCompare(b.title))
        }
      })
    } else {
      // 热门序：先提取所有有有效image的品牌
      const allHotBrands = this.groupBrands.flatMap(group => 
        group.brands.filter(brand => brand.image && brand.image.trim() !== '')
      )
      // 热门品牌可按需排序，默认按品牌名排序，有热度字段可替换为热度降序
      allHotBrands.sort((a,b) => a.title.localeCompare(b.title))
      // 热门序返回统一分组，不需要按首字母拆分
      return [{
        latter: '热门品牌',
        brands: allHotBrands
      }]
    }
  }
}

如果需要保留首字母分组、仅分组内优先展示热门品牌，可替换热门序逻辑为：

// 分组内优先排热门（有image）再排普通，保持首字母分组结构
return this.groupBrands.map(group => {
  return {
    ...group,
    brands: group.brands.sort((a,b) => {
      // 有image的排前面
      const aIsHot = !!a.image.trim()
      const bIsHot = !!b.image.trim()
      if (aIsHot && !bIsHot) return -1
      if (!aIsHot && bIsHot) return 1
      // 同优先级按字母排序
      return a.title.localeCompare(b.title)
    })
  }
})

步骤3：新增排序切换按钮+修改模板渲染逻辑 #

<!-- 排序切换按钮 -->
<div class="sort-tabs">
  <button 
    @click="sortType = 'alphabet'"
    :class="{active: sortType === 'alphabet'}"
  >
    字母排序
  </button>
  <button 
    @click="sortType = 'hot'"
    :class="{active: sortType === 'hot'}"
  >
    热门排序
  </button>
</div>

<!-- 品牌列表渲染，把原groupBrands替换为计算属性displayBrands -->
<ul>
  <li v-for="groupBrand in displayBrands"
      :key="groupBrand.latter"
      class="group"
  >
    <h3>{{ groupBrand.latter }}</h3>
    <ul>
      <li v-for="brand in groupBrand.brands"
          :key="brand.id"
      >
        <label :for="brand.id">
          <!-- 热门品牌可展示logo -->
          <img v-if="brand.image.trim()" :src="brand.image" :alt="brand.title" class="brand-logo">
          <input
              type="radio"
              :id="brand.id"
              name="brand"
          >
          <span>{{ brand.title }}</span>
        </label>
      </li>
    </ul>
  </li>
</ul>

补充说明 #

• 热门品牌判断规则为image字段非空且不是纯空格，可根据业务需求调整判断逻辑
• 热门品牌的排序规则可自定义，如有热度权重字段可直接替换排序逻辑为热度值降序
• 保留了原字母序的分组展示逻辑，两种排序切换无数据兼容问题

内容的提问来源于stack exchange，提问作者test