vue实现selected功能

Vue 实现 selected 功能

在 Vue 中实现 selected 功能通常涉及表单控件的绑定和状态管理。以下是几种常见的方法：

使用 v-model 绑定 select 元素

通过 v-model 可以轻松实现双向数据绑定，将选中的值与 Vue 实例的数据属性关联起来。

<template>
  <select v-model="selectedOption">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
  <p>Selected: {{ selectedOption }}</p>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: 'option2' // 默认选中第二个选项
    };
  }
};
</script>

动态生成 options

如果需要从数据动态生成选项，可以使用 v-for 指令。

<template>
  <select v-model="selectedFruit">
    <option v-for="fruit in fruits" :value="fruit.id" :key="fruit.id">
      {{ fruit.name }}
    </option>
  </select>
  <p>Selected Fruit ID: {{ selectedFruit }}</p>
</template>

<script>
export default {
  data() {
    return {
      selectedFruit: null,
      fruits: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
    };
  }
};
</script>

处理对象类型选项

如果希望选中的是整个对象而非单个属性，可以使用 v-bind 绑定对象值。

<template>
  <select v-model="selectedFruitObj">
    <option v-for="fruit in fruits" :value="fruit" :key="fruit.id">
      {{ fruit.name }}
    </option>
  </select>
  <p>Selected Fruit: {{ selectedFruitObj }}</p>
</template>

<script>
export default {
  data() {
    return {
      selectedFruitObj: null,
      fruits: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
    };
  }
};
</script>

自定义 select 组件

对于更复杂的需求，可以封装一个自定义的 select 组件。

<template>
  <CustomSelect v-model="selectedValue" :options="options" />
  <p>Selected: {{ selectedValue }}</p>
</template>

<script>
import CustomSelect from './CustomSelect.vue';

export default {
  components: {
    CustomSelect
  },
  data() {
    return {
      selectedValue: null,
      options: [
        { value: '1', label: 'One' },
        { value: '2', label: 'Two' },
        { value: '3', label: 'Three' }
      ]
    };
  }
};
</script>

在 CustomSelect.vue 中：

<template>
  <select :value="value" @change="handleChange">
    <option v-for="option in options" :value="option.value" :key="option.value">
      {{ option.label }}
    </option>
  </select>
</template>

<script>
export default {
  props: {
    value: {
      type: [String, Number, Object],
      default: null
    },
    options: {
      type: Array,
      required: true
    }
  },
  methods: {
    handleChange(event) {
      this.$emit('input', event.target.value);
    }
  }
};
</script>

处理多选 select

对于多选 select，v-model 会绑定到一个数组。

<template>
  <select v-model="selectedOptions" multiple>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
  <p>Selected Options: {{ selectedOptions }}</p>
</template>

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

这些方法涵盖了 Vue 中实现 selected 功能的常见场景，从简单绑定到复杂自定义组件都有涉及。