当前位置：首页 > VUE

vue实现单选多选

2026-02-18 10:27:46VUE

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>
    <p>Selected: {{ selectedOption }}</p>
  </div>
</template>

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

Vue 实现多选功能

使用 v-model 绑定复选框的值，通常需要绑定到一个数组。

vue实现单选多选

<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: {{ selectedOptions }}</p>
  </div>
</template>

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

使用动态渲染选项

通过 v-for 动态渲染单选或多选选项，适用于选项数据来自后端或动态变化的情况。

<template>
  <div>
    <div v-for="option in options" :key="option.value">
      <label>
        <input 
          type="radio" 
          v-model="selectedOption" 
          :value="option.value"
        > {{ option.label }}
      </label>
    </div>
    <p>Selected: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' }
      ]
    }
  }
}
</script>

自定义样式单选/多选组件

通过隐藏原生输入框，使用 CSS 自定义样式，提升用户体验。

vue实现单选多选

<template>
  <div class="custom-checkbox">
    <label 
      v-for="option in options" 
      :key="option.value"
      :class="{ 'active': selectedOptions.includes(option.value) }"
    >
      <input 
        type="checkbox" 
        v-model="selectedOptions" 
        :value="option.value"
        hidden
      >
      {{ option.label }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' }
      ]
    }
  }
}
</script>

<style>
.custom-checkbox label {
  padding: 8px 12px;
  border: 1px solid #ddd;
  cursor: pointer;
  margin-right: 5px;
}
.custom-checkbox label.active {
  background-color: #42b983;
  color: white;
}
</style>

使用第三方组件库

对于更复杂的需求，可以使用现成的 UI 库如 Element UI、Vuetify 或 Ant Design Vue。

以 Element UI 为例：

<template>
  <div>
    <!-- 单选 -->
    <el-radio-group v-model="selectedOption">
      <el-radio label="option1">Option 1</el-radio>
      <el-radio label="option2">Option 2</el-radio>
    </el-radio-group>

    <!-- 多选 -->
    <el-checkbox-group v-model="selectedOptions">
      <el-checkbox label="option1">Option 1</el-checkbox>
      <el-checkbox label="option2">Option 2</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

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