Vue.js中如何优化单选按钮切换时父div的类增删逻辑？

嘿，这个场景我太熟悉啦！当单选按钮数量变多的时候，手动给每个按钮写类名切换逻辑确实会变得又冗余又难维护，Vue的数据驱动特性刚好能完美解决这个问题，而且扩展性拉满～

核心思路：用响应式状态绑定 + 动态类名 #

我们只需要用一个响应式变量来记录当前选中的单选按钮标识，然后通过Vue的:class指令，让每个父div根据这个变量自动判断是否添加目标类。这样不管后续加多少个单选按钮，都不需要额外写JS逻辑，只需要复用模板就行。

具体实现代码 #

基础版（固定选项）

<template>
  <div id="app">
    <!-- 第一个选项 -->
    <div :class="{ 'active': selectedOption === 'opt1' }">
      <input type="radio" value="opt1" v-model="selectedOption"> 选项1
    </div>
    
    <!-- 第二个选项 -->
    <div :class="{ 'active': selectedOption === 'opt2' }">
      <input type="radio" value="opt2" v-model="selectedOption"> 选项2
    </div>
    
    <!-- 新增选项只需要复制这段模板，修改value和判断值即可 -->
    <div :class="{ 'active': selectedOption === 'opt3' }">
      <input type="radio" value="opt3" v-model="selectedOption"> 选项3
    </div>
  </div>
</template>

<script>
new Vue({
  el: '#app',
  data() {
    return {
      selectedOption: 'opt1' // 设置默认选中的选项
    }
  }
})
</script>

<style>
/* 你的目标样式类 */
.active {
  border: 2px solid blue;
  padding: 8px;
}
</style>

进阶版（动态生成选项）

如果你的选项是从后端获取或者需要批量管理的，用v-for循环生成会更高效：

<template>
  <div id="app">
    <div 
      v-for="option in options" 
      :key="option.id"
      :class="{ 'active': selectedOption === option.id }"
    >
      <input 
        type="radio" 
        :value="option.id" 
        v-model="selectedOption"
      > {{ option.label }}
    </div>
  </div>
</template>

<script>
new Vue({
  el: '#app',
  data() {
    return {
      selectedOption: 'opt1',
      // 选项数组，新增/删除选项只需要修改这个数组
      options: [
        { id: 'opt1', label: '选项1' },
        { id: 'opt2', label: '选项2' },
        { id: 'opt3', label: '选项3' }
      ]
    }
  }
})
</script>

为什么这个方案更优？ #

• 完全数据驱动：不用手动操作DOM或类名，Vue会自动根据selectedOption的变化更新DOM，避免了繁琐的DOM操作
• 扩展性极强：新增单选按钮只需要添加模板（或修改选项数组），不需要修改任何JS逻辑
• 代码更简洁易读：状态变化一目了然，后期维护成本极低

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