vue 实现选题操作

Vue 实现选题操作

在 Vue 中实现选题操作通常涉及列表渲染、事件处理和状态管理。以下是一个常见的实现方案，适用于单选或多选场景。

单选实现

创建一个可选的列表，点击选中某一项：

<template>
  <div>
    <ul>
      <li 
        v-for="item in items" 
        :key="item.id"
        @click="selectItem(item)"
        :class="{ 'selected': selectedItem === item }"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ],
      selectedItem: null
    }
  },
  methods: {
    selectItem(item) {
      this.selectedItem = item
    }
  }
}
</script>

<style>
.selected {
  background-color: #42b983;
  color: white;
}
</style>

多选实现

允许用户选择多个选项：

<template>
  <div>
    <ul>
      <li 
        v-for="item in items" 
        :key="item.id"
        @click="toggleSelect(item)"
        :class="{ 'selected': selectedItems.includes(item) }"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ],
      selectedItems: []
    }
  },
  methods: {
    toggleSelect(item) {
      const index = this.selectedItems.findIndex(i => i.id === item.id)
      if (index === -1) {
        this.selectedItems.push(item)
      } else {
        this.selectedItems.splice(index, 1)
      }
    }
  }
}
</script>

使用复选框实现多选

另一种常见的多选实现方式：

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      <input 
        type="checkbox" 
        :id="'item-' + item.id" 
        :value="item" 
        v-model="selectedItems"
      >
      <label :for="'item-' + item.id">{{ item.name }}</label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ],
      selectedItems: []
    }
  }
}
</script>

使用 Vuex 管理选择状态

对于复杂应用，可以使用 Vuex 集中管理选择状态：

// store.js
export default new Vuex.Store({
  state: {
    items: [
      { id: 1, name: '选项1' },
      { id: 2, name: '选项2' },
      { id: 3, name: '选项3' }
    ],
    selectedItems: []
  },
  mutations: {
    selectItem(state, item) {
      state.selectedItems.push(item)
    },
    deselectItem(state, item) {
      state.selectedItems = state.selectedItems.filter(i => i.id !== item.id)
    }
  }
})

组件中使用：

<template>
  <div>
    <ul>
      <li 
        v-for="item in $store.state.items" 
        :key="item.id"
        @click="toggleSelect(item)"
        :class="{ 'selected': isSelected(item) }"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    toggleSelect(item) {
      if (this.isSelected(item)) {
        this.$store.commit('deselectItem', item)
      } else {
        this.$store.commit('selectItem', item)
      }
    },
    isSelected(item) {
      return this.$store.state.selectedItems.some(i => i.id === item.id)
    }
  }
}
</script>

性能优化建议

对于大型列表，考虑使用虚拟滚动或分页加载：

<template>
  <div>
    <VirtualList :size="50" :remain="8">
      <div 
        v-for="item in items" 
        :key="item.id"
        @click="selectItem(item)"
        :class="{ 'selected': selectedItem === item }"
      >
        {{ item.name }}
      </div>
    </VirtualList>
  </div>
</template>

以上实现方式可以根据具体需求进行调整和组合，满足不同场景下的选题需求。