vue如何获取option的值

在 Vue 中获取 select 元素的 option 值可以使用 `v-model` 指令来实现双向绑定，或者使用 `ref` 属性和 `$refs` 对象来获取 select 元素的值。

1. 使用 `v-model` 指令实现双向绑定

<template>
  <div>
    <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 option: {{selectedOption}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
    }
  },
}
</script>

2. 使用 `ref` 属性和 `$refs` 对象获取 select 元素的值

<template>
  <div>
    <select ref="selectElement">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
    <button @click="getSelectedOption">Get selected option</button>
  </div>
</template>

<script>
export default {
  methods: {
    getSelectedOption() {
      const selectedOption = this.$refs.selectElement.value
      console.log(selectedOption)
    },
  },
}
</script>

以上两种方法都可以获取 select 元素的选中的 option 值。