Vue非Composition API下简化多选项点击激活逻辑的更佳写法

优化思路 #

核心是用单个状态值替代多个冗余布尔变量，通过统一的平台数据数组+循环渲染减少重复代码，同时用单一方法处理点击逻辑，彻底消除冗余。

优化后的代码 #

HTML 部分

<div 
  v-for="platform in platformsList" 
  :key="platform.id"
  :class="[platform.className, { activex: platforms.selected === platform.value }]"
  @click="selectPlatform(platform.value)"
>
  <img v-if="platform.imgSrc" :src="platform.imgSrc" :width="platform.imgWidth">
  {{ platform.label }}
  <small v-if="platform.tag">({{ platform.tag }})</small>
</div>

JS 部分

data() {
  return {
    platforms: { selected: null },
    // 统一管理所有平台的配置数据
    platformsList: [
      {
        id: 1,
        className: 'opencart',
        value: 'oc',
        label: 'Opencart',
        tag: 'soon'
      },
      {
        id: 2,
        className: 'woox',
        value: 'woo',
        label: 'Woocommerce',
        imgSrc: '../../assets/images/wooLogo.png'
      },
      {
        id: 3,
        className: 'shopify',
        value: 'shopify',
        label: 'Shopify',
        imgSrc: '../../assets/images/shopify.png',
        imgWidth: '80'
      }
    ]
  }
},
methods: {
  selectPlatform(platformValue) {
    this.platforms.selected = platformValue;
    console.log(this.platforms.selected);
  }
}

关键优化点 #

• 移除冗余状态变量：删掉isOc/isWo/isSo三个布尔值，直接通过platforms.selected判断当前激活的平台，减少状态维护成本
• 统一平台数据：把每个平台的样式、标识、文本、图片等信息放到数组中，后续新增/修改平台只需修改数组，无需改动DOM和方法
• 循环渲染DOM：用v-for批量生成平台选项，避免重复编写几乎相同的HTML结构
• 单一点击方法：用selectPlatform方法接收平台标识，统一处理选中逻辑，替代三个重复的chk方法

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