vue实现选题操作

Vue 实现选题操作

在 Vue 中实现选题操作通常涉及数据绑定、事件处理和状态管理。以下是几种常见的实现方式：

单选实现

使用 v-model 绑定单选值，通过 radio 或 select 元素实现：

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

<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [
        { value: 'A', label: 'Option A' },
        { value: 'B', label: 'Option B' },
        { value: 'C', label: 'Option C' }
      ]
    }
  }
}
</script>

多选实现

使用 v-model 绑定数组实现多选：

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

<script>
export default {
  data() {
    return {
      selectedValues: [],
      options: [
        { value: 'A', label: 'Option A' },
        { value: 'B', label: 'Option B' },
        { value: 'C', label: 'Option C' }
      ]
    }
  }
}
</script>

自定义样式单选

使用 CSS 类动态切换实现自定义样式单选：

<template>
  <div class="option-group">
    <div 
      v-for="option in options" 
      :key="option.value" 
      class="option-item"
      :class="{ 'active': selectedValue === option.value }"
      @click="selectedValue = option.value"
    >
      {{ option.label }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [
        { value: 'A', label: 'Option A' },
        { value: 'B', label: 'Option B' },
        { value: 'C', label: 'Option C' }
      ]
    }
  }
}
</script>

<style>
.option-item {
  padding: 10px;
  border: 1px solid #ddd;
  cursor: pointer;
  margin: 5px;
}
.option-item.active {
  background-color: #409eff;
  color: white;
}
</style>

使用组件实现

封装可复用的选题组件：

<!-- OptionGroup.vue -->
<template>
  <div class="option-group">
    <slot></slot>
  </div>
</template>

<!-- OptionItem.vue -->
<template>
  <div 
    class="option-item"
    :class="{ 'active': isActive }"
    @click="select"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    value: { type: [String, Number], required: true },
    modelValue: { type: [String, Number], default: '' }
  },
  computed: {
    isActive() {
      return this.modelValue === this.value
    }
  },
  methods: {
    select() {
      this.$emit('update:modelValue', this.value)
    }
  }
}
</script>

<!-- 使用示例 -->
<template>
  <OptionGroup v-model="selectedValue">
    <OptionItem value="A">Option A</OptionItem>
    <OptionItem value="B">Option B</OptionItem>
    <OptionItem value="C">Option C</OptionItem>
  </OptionGroup>
</template>

与 Vuex 集成

当需要全局状态管理时，可以与 Vuex 集成：

// store.js
export default new Vuex.Store({
  state: {
    selectedOptions: []
  },
  mutations: {
    setSelectedOptions(state, payload) {
      state.selectedOptions = payload
    }
  }
})

// 组件中使用
export default {
  computed: {
    selectedOptions: {
      get() {
        return this.$store.state.selectedOptions
      },
      set(value) {
        this.$store.commit('setSelectedOptions', value)
      }
    }
  }
}

这些方法涵盖了从基础到进阶的 Vue 选题实现方式，可以根据具体需求选择适合的方案。