vue单选框和多选框

Vue中，你可以使用`v-model`指令来处理单选框和多选框的选中状态。

对于单选框，你可以将每个单选框的value绑定到一个data属性上，并使用`v-model`来绑定选中的值。当用户选择不同的选项时，绑定的data属性的值会自动更新。

示例代码如下：

<template>
  <div>
    <input type="radio" id="option1" value="option1" v-model="selectedOption">
    <label for="option1">Option 1</label>

    <input type="radio" id="option2" value="option2" v-model="selectedOption">
    <label for="option2">Option 2</label>

    <input type="radio" id="option3" value="option3" v-model="selectedOption">
    <label for="option3">Option 3</label>

    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: ''
    };
  }
};
</script>

对于多选框，你可以将每个多选框的value绑定到一个数组中，并使用`v-model`来绑定选中的值。当用户选择或取消选择不同的选项时，绑定的数组会自动更新。

示例代码如下：

<template>
  <div>
    <input type="checkbox" id="option1" value="option1" v-model="selectedOptions">
    <label for="option1">Option 1</label>

    <input type="checkbox" id="option2" value="option2" v-model="selectedOptions">
    <label for="option2">Option 2</label>

    <input type="checkbox" id="option3" value="option3" v-model="selectedOptions">
    <label for="option3">Option 3</label>

    <p>Selected options: {{ selectedOptions }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: []
    };
  }
};
</script>

这样，你就可以在Vue中使用`v-model`来处理单选框和多选框的选中状态了。