如何在Vue中传递select的选定值或索引？

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

<script>
export default {
  data() {
    return {
      selectedValue: '' // 初始化选定值为空
    };
  }
};
</script>

<template>
  <div>
    <select @change="handleSelectChange">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
    <p>Selected Value: {{ selectedValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '' // 初始化选定值为空
    };
  },
  methods: {
    handleSelectChange(event) {
      this.selectedValue = event.target.value;
    }
  }
};
</script>