vue实现选题操作

实现选题功能的基本思路

在Vue中实现选题操作通常涉及数据绑定、事件处理和状态管理。核心逻辑是通过v-model或自定义事件捕获用户选择，更新数据状态并反馈到界面。

单选功能的实现

使用radio按钮或自定义样式实现单选：

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

<script>
export default {
  data() {
    return {
      options: [
        { id: 'opt1', value: 'A', label: '选项A' },
        { id: 'opt2', value: 'B', label: '选项B' }
      ],
      selectedOption: ''
    }
  }
}
</script>

多选功能的实现

使用checkbox实现多选：

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

<script>
export default {
  data() {
    return {
      options: [
        { id: 'opt1', value: 'A', label: '选项A' },
        { id: 'opt2', value: 'B', label: '选项B' }
      ],
      selectedOptions: []
    }
  }
}
</script>

自定义选择组件

创建可复用的选择组件：

<!-- Selector.vue -->
<template>
  <div class="selector">
    <div 
      v-for="item in items" 
      :key="item.value"
      :class="{ 'selected': isSelected(item) }"
      @click="toggleSelect(item)">
      {{ item.label }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    items: Array,
    multiple: Boolean,
    value: [Array, Object]
  },
  methods: {
    isSelected(item) {
      return this.multiple 
        ? this.value.includes(item.value)
        : this.value === item.value
    },
    toggleSelect(item) {
      if (this.multiple) {
        const newValue = [...this.value]
        const index = newValue.indexOf(item.value)
        index === -1 
          ? newValue.push(item.value) 
          : newValue.splice(index, 1)
        this.$emit('input', newValue)
      } else {
        this.$emit('input', item.value)
      }
    }
  }
}
</script>

使用Vuex管理选择状态

对于复杂应用，建议使用Vuex管理选择状态：

// store.js
export default new Vuex.Store({
  state: {
    selections: []
  },
  mutations: {
    SET_SELECTION(state, payload) {
      state.selections = payload
    }
  },
  actions: {
    updateSelection({ commit }, selections) {
      commit('SET_SELECTION', selections)
    }
  }
})

样式优化技巧

为选中状态添加视觉反馈：

.selector-item {
  padding: 8px 12px;
  border: 1px solid #ddd;
  margin: 4px;
  cursor: pointer;
}

.selector-item.selected {
  background-color: #42b983;
  color: white;
  border-color: #42b983;
}

性能优化建议

对于大型选项列表，使用虚拟滚动：

<template>
  <RecycleScroller
    :items="options"
    :item-size="32"
    key-field="id">
    <template v-slot="{ item }">
      <div @click="selectItem(item)">
        {{ item.label }}
      </div>
    </template>
  </RecycleScroller>
</template>