vue实现selected功能

Vue 实现 selected 功能

在 Vue 中实现 selected 功能可以通过 v-model 指令绑定表单元素的值，或者使用 :selected 属性动态控制选中状态。

使用 v-model 实现下拉框选中

通过 v-model 绑定 select 元素的值，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>
</template>

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

动态绑定 selected 属性

如果需要手动控制选中状态，可以通过 :selected 绑定一个条件表达式。

<template>
  <select>
    <option 
      v-for="option in options" 
      :value="option.value"
      :selected="option.value === selectedOption"
    >
      {{ option.text }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: 'option2',
      options: [
        { value: 'option1', text: 'Option 1' },
        { value: 'option2', text: 'Option 2' },
        { value: 'option3', text: 'Option 3' }
      ]
    }
  }
}
</script>

使用计算属性动态设置选中值

对于更复杂的逻辑，可以使用计算属性动态返回选中的值。

<template>
  <select v-model="computedSelected">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      someCondition: true
    }
  },
  computed: {
    computedSelected() {
      return this.someCondition ? 'option2' : 'option1'
    }
  }
}
</script>

处理多选 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>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: ['option1', 'option3'] // 默认选中第一和第三个选项
    }
  }
}
</script>

注意事项

• 使用 v-model 时，确保绑定的初始值与某个 option 的 value 匹配，否则可能无法正确显示选中状态。
• 对于动态生成的选项，建议始终使用 v-for 而不是手动编写 option 元素。
• 如果需要重置选中状态，可以直接修改 v-model 绑定的值为空或默认值。