vue判断radio是否被选中

在Vue中，我们可以通过v-model指令来双向绑定radio的选中状态，当radio被选中时，v-model的值会变为该radio的值；当radio未被选中时，v-model的值会变为空字符串，我们可以通过检查v-model的值来判断radio是否被选中。

我们需要在data中定义一个变量来存储v-model的值，我们可以使用v-model指令将这个变量与radio进行双向绑定，我们可以通过判断这个变量的值来判断radio是否被选中。

以下是一个简单的示例：

<template>
  <div>
    <input type="radio" id="male" value="male" v-model="gender">
    <label for="male">男</label>
    <input type="radio" id="female" value="female" v-model="gender">
    <label for="female">女</label>
    <button @click="checkGender">检查性别</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      gender: ''
    }
  },
  methods: {
    checkGender() {
      if (this.gender === 'male') {
        console.log('男性');
      } else if (this.gender === 'female') {
        console.log('女性');
      } else {
        console.log('未选择');
      }
    }
  }
}
</script>

在这个示例中，我们定义了一个名为gender的变量，并使用v-model将其与两个radio进行双向绑定，当点击“检查性别”按钮时，我们会调用checkGender方法来检查gender变量的值，并根据其值输出相应的信息。

需要注意的是，v-model只能用于表单元素，因此我们不能直接将v-model用于radio元素，我们可以使用change事件来监听radio的变化，并在事件处理函数中更新v-model的值，以下是一个使用change事件的示例：

<template>
  <div>
    <input type="radio" id="male" value="male" @change="updateGender('male')">
    <label for="male">男</label>
    <input type="radio" id="female" value="female" @change="updateGender('female')">
    <label for="female">女</label>
  </div>
</template>
<script>
export default {
  data() {
    return {
      gender: ''
    }
  },
  methods: {
    updateGender(value) {
      this.gender = value;
    }
  }
}
</script>

在这个示例中，我们使用了change事件来监听radio的变化，并在事件处理函数updateGender中更新gender变量的值，这样，我们就可以通过检查gender变量的值来判断radio是否被选中了。