Vue.js单选框值变化时执行操作控制对应div显隐如何实现

数据老陈

2026-10-7

实现方案

你可以按以下步骤修改现有代码即可实现需求：

调整data中定义的变量，不用布尔值show，改为存储当前选中的单选按钮值，初始值和默认选中的黄色单选按钮的value保持一致
给需要切换显示的两个div加上v-show指令，分别绑定和选中值匹配的判断条件
完善onChange方法，将选中的单选值赋值给定义的变量即可触发视图自动更新

修改后完整代码

模板部分

<div class="col-sm-3 d-flex border-light">
  <input class="form-check-input" type="radio" name="inlineRadioOptions1" id="inlineRadio3" @change="onChange($event)" value="1" checked>
  <label class="form-check-label" for="inlineRadio3"><b> YELLOW</b></label>
</div>
<div class="col-sm-3 d-flex border-light">
  <input class="form-check-input" type="radio" name="inlineRadioOptions1" id="inlineRadio4" @change="onChange($event)" value="2">
  <label class="form-check-label" for="inlineRadio4"><b> BLUE</b></label>
</div>
<!-- 加v-show控制显示隐藏 -->
<div v-show="selectedRadio === '1'">YELLOW</div>
<div v-show="selectedRadio === '2'">BLUE</div>

JS部分

export default {
  data() {
    return {
      // 存储当前选中的单选按钮值
      selectedRadio: '1'
    }
  },
  methods: {
    onChange(event) {
      // 更新选中值，触发视图自动刷新
      this.selectedRadio = event.target.value
    }
  }
}