面试题：Vue中如何实现单选按钮与下拉菜单的双向数据绑定

Question

在Vue项目里，阐述如何使用v-model指令对单选按钮组和下拉菜单进行双向数据绑定，同时给出一个简单的示例代码，展示如何获取用户选择的值并在组件中进行相应处理。

Answer 1

单选按钮组

1. 双向数据绑定原理：v-model 指令在单选按钮组上通过绑定同一个数据变量，使得选中状态与数据变量双向关联。当选中某个单选按钮时，该按钮对应的值会更新绑定的数据变量；反之，数据变量的变化也会影响单选按钮的选中状态。
2. 示例代码：

<template>
  <div>
    <h3>单选按钮组示例</h3>
    <input type="radio" id="option1" value="option1" v-model="selectedOption">
    <label for="option1">选项1</label>
    <input type="radio" id="option2" value="option2" v-model="selectedOption">
    <label for="option2">选项2</label>
    <p>你选择的是: {{ selectedOption }}</p>
  </div>
</template>

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

下拉菜单

1. 双向数据绑定原理：对于下拉菜单，v-model 指令绑定到 <select> 元素上，其绑定的数据变量反映当前选中的 <option> 的值。当用户选择不同的选项时，绑定的数据变量会更新；同样，数据变量的改变也会使相应的选项被选中。
2. 示例代码：

<template>
  <div>
    <h3>下拉菜单示例</h3>
    <select v-model="selectedValue">
      <option value="value1">值1</option>
      <option value="value2">值2</option>
      <option value="value3">值3</option>
    </select>
    <p>你选择的值是: {{ selectedValue }}</p>
  </div>
</template>

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