vue实现单选多选

Vue 实现单选功能

使用 v-model 绑定单选按钮的值，确保同一组单选按钮的 name 属性相同。

<template>
  <div>
    <label>
      <input type="radio" v-model="selectedOption" value="option1"> Option 1
    </label>
    <label>
      <input type="radio" v-model="selectedOption" value="option2"> Option 2
    </label>
    <label>
      <input type="radio" v-model="selectedOption" value="option3"> Option 3
    </label>
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

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

Vue 实现多选功能

使用 v-model 绑定多选框的值，数据需要是数组类型。

<template>
  <div>
    <label>
      <input type="checkbox" v-model="selectedOptions" value="option1"> Option 1
    </label>
    <label>
      <input type="checkbox" v-model="selectedOptions" value="option2"> Option 2
    </label>
    <label>
      <input type="checkbox" v-model="selectedOptions" value="option3"> Option 3
    </label>
    <p>Selected options: {{ selectedOptions }}</p>
  </div>
</template>

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

使用组件实现单选/多选

可以封装自定义组件实现更复杂的单选/多选功能。

<template>
  <div>
    <radio-group v-model="selectedRadio">
      <radio-button value="a">A</radio-button>
      <radio-button value="b">B</radio-button>
    </radio-group>

    <checkbox-group v-model="selectedCheckbox">
      <checkbox-button value="x">X</checkbox-button>
      <checkbox-button value="y">Y</checkbox-button>
    </checkbox-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedRadio: '',
      selectedCheckbox: []
    }
  }
}
</script>

使用第三方库

对于更复杂的需求，可以考虑使用第三方组件库：

1. Element UI 的 Radio 和 Checkbox 组件
2. Vuetify 的选择组件
3. Ant Design Vue 的单选/多选组件

这些库提供了丰富的样式和功能，如禁用状态、按钮样式、分组等。