当前位置：首页 > VUE

vue实现选题操作

2026-03-09 01:39:41VUE

Vue 实现选题操作

数据绑定与选项列表 在 Vue 中实现选题操作通常需要绑定一个数组或对象来存储选项数据，并通过 v-model 或事件监听实现选择逻辑。以下是一个基础实现示例：

<template>
  <div>
    <div v-for="(option, index) in options" :key="index">
      <input 
        type="checkbox" 
        :id="'option-' + index" 
        :value="option.value" 
        v-model="selectedOptions"
      >
      <label :for="'option-' + index">{{ option.label }}</label>
    </div>
    <p>已选选项: {{ selectedOptions }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
        { label: '选项3', value: '3' }
      ],
      selectedOptions: []
    };
  }
};
</script>

单选与多选控制

多选：使用 checkbox 和数组类型的 v-model（如上例）。

单选：使用 radio 绑定单个值：

<input 
  type="radio" 
  :id="'option-' + index" 
  :value="option.value" 
  v-model="singleSelected"
>

动态选项与异步加载 若选项需从接口获取，可在 created 或 mounted 钩子中加载数据：

export default {
  data() {
    return {
      options: [],
      selectedOptions: []
    };
  },
  async created() {
    const response = await fetch('api/options');
    this.options = await response.json();
  }
};

自定义选择逻辑 通过事件触发自定义方法处理复杂逻辑：

<input 
  type="checkbox" 
  @change="handleSelect(option.value)"
>

methods: {
  handleSelect(value) {
    if (this.selectedOptions.includes(value)) {
      this.selectedOptions = this.selectedOptions.filter(v => v !== value);
    } else {
      this.selectedOptions.push(value);
    }
  }
}

UI 库集成 使用如 Element UI 或 Ant Design Vue 可快速实现美观的选题组件：

<el-checkbox-group v-model="selectedOptions">
  <el-checkbox 
    v-for="option in options" 
    :label="option.value" 
    :key="option.value"
  >
    {{ option.label }}
  </el-checkbox>
</el-checkbox-group>

注意事项

vue实现选题操作