vue 单选按钮

Vue单选按钮是一种常用的表单元素，用于让用户从一组选项中选择一个。在Vue中，我们可以使用元素来创建单选按钮，并通过v-model指令将其与Vue实例中的数据进行绑定。

## Vue单选按钮的基本用法

要创建一个Vue单选按钮，我们可以使用以下代码：

`html

Option 1

Option 2

在上面的代码中，我们创建了两个单选按钮，分别有不同的id和value属性。这些属性用于标识单选按钮的值。通过v-model指令，我们将选中的单选按钮的值与Vue实例中的selectedOption属性进行双向绑定。
## 获取选中的值
通过上述代码，我们可以获取到用户选择的值。在Vue实例中，我们可以通过访问selectedOption属性来获取选中的值。例如：
`javascript
new Vue({
  data: {
    selectedOption: ''
  },
  methods: {
    submitForm() {
      console.log(this.selectedOption);
    }
  }
});

在上面的代码中，我们定义了一个Vue实例，并在data选项中声明了selectedOption属性。当用户选择一个选项后，该属性会自动更新。在submitForm方法中，我们可以通过访问this.selectedOption来获取选中的值，并进行相应的处理。

## 默认选中的值

有时候，我们希望在页面加载时就有一个选项被选中。为了实现这个功能，我们可以将selectedOption属性的初始值设置为某个选项的值。例如：

`javascript

new Vue({

data: {

selectedOption: 'option1'

}

});

在上面的代码中，我们将selectedOption属性的初始值设置为option1，这样在页面加载时，Option 1对应的单选按钮就会被选中。

##

Vue单选按钮是一种方便用户进行选择的表单元素。通过v-model指令，我们可以将单选按钮与Vue实例中的数据进行绑定，并实现对选中值的获取和处理。希望本文对你理解Vue单选按钮的基本用法有所帮助。如有更多问题，请随时提问。