Vue.js 单选框实现方法 - 使用 v-model 指令

在 Vue.js 中，可以使用 `v-model` 指令和 `v-bind` 指令来实现单选框的功能。

以下是一个简单的例子：

<template>
  <div>
    <label>
      <input type="radio" value="option1" v-model="selectedOption">
      Option 1
    </label>

    <label>
      <input type="radio" value="option2" v-model="selectedOption">
      Option 2
    </label>

    <label>
      <input type="radio" value="option3" v-model="selectedOption">
      Option 3
    </label>

    <p>Selected Option: {{ selectedOption }}</p>
  </div>
</template>

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

在上面的例子中，我们使用了三个单选框，并将它们的值分别设置为 'option1'、'option2' 和 'option3'。通过 `v-model` 指令将 `selectedOption` 绑定到这三个单选框上，这样当用户选择其中一个选项时，`selectedOption` 的值会自动更新。

最后，我们在页面上显示 `selectedOption` 的值，这样用户就可以看到当前选择的选项。