Vue.js单选按钮组选中时如何绑定selected类到外层div

我来帮你搞定这个问题！既然你已经用v-model绑定了单选按钮，确实不需要再依赖:checked属性判断状态，我们可以直接通过v-model绑定的变量来控制外层div的类名。

核心思路 #

v-model会自动把选中的单选按钮的value值同步到绑定的变量（也就是你的selectedOs）中。所以我们只需要判断这个变量的值是否等于当前单选按钮的value，就能决定是否给外层div加上selected类。

修改后的代码示例 #

<div class="sau-select lg center" :class="{ selected: selectedOs === 'windows' }">
   <label for="windows">
      <input type="radio" id="windows" value="windows" v-model="selectedOs">
      <span></span>
      <img src="/img/windows.gif" alt="Windows">Windows
   </label>
</div>

<!-- 如果有其他选项，比如Mac，写法类似 -->
<div class="sau-select lg center" :class="{ selected: selectedOs === 'mac' }">
   <label for="mac">
      <input type="radio" id="mac" value="mac" v-model="selectedOs">
      <span></span>
      <img src="/img/mac.gif" alt="Mac">Mac
   </label>
</div>

代码解释 #

1. 移除了多余的:checked="checked"属性——v-model已经完全接管了单选按钮的选中状态，不需要额外手动控制。
2. 将div的:class绑定改为对象格式：{ selected: selectedOs === 'windows' }。当selectedOs的值等于当前单选按钮的value（这里是'windows'）时，selected类会自动添加到div上；反之则会移除。

扩展优化（循环生成选项） #

如果你的单选按钮组是通过循环生成的，用下面的写法会更简洁易维护：

<div 
  v-for="os in osOptions" 
  :key="os.value"
  class="sau-select lg center" 
  :class="{ selected: selectedOs === os.value }"
>
   <label :for="os.value">
      <input 
        type="radio" 
        :id="os.value" 
        :value="os.value" 
        v-model="selectedOs"
      >
      <span></span>
      <img :src="os.imgSrc" :alt="os.name">{{ os.name }}
   </label>
</div>

<!-- 对应的组件data部分 -->
<script>
export default {
  data() {
    return {
      selectedOs: '',
      osOptions: [
        { value: 'windows', name: 'Windows', imgSrc: '/img/windows.gif' },
        { value: 'mac', name: 'Mac', imgSrc: '/img/mac.gif' },
        { value: 'linux', name: 'Linux', imgSrc: '/img/linux.gif' }
      ]
    }
  }
}
</script>

这样不管你有多少个选项，都能自动根据选中状态给对应的div添加selected类，后续新增或修改选项也只需要调整osOptions数组即可。

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