vue做app单选框radio选中

在Vue中使用单选框（radio）非常简单，可以使用v-model指令将单选框的值绑定到一个变量上，当选中的单选框改变时，变量的值也会相应地更新。以下是一个例子：

```

```

在上面的代码中，我们首先使用v-model指令将单选框的值绑定到一个名为gender的变量上，然后使用value属性指定每个单选框的值。

当用户选中一个单选框时，绑定的gender变量将会被更新为相应的值。在上面的例子中，初始状态下gender的值是男性（因为我们将其赋值为'male'），当用户选择女性单选框时，gender的值将变为'female'。

单选框的选中原理其实是很简单的：当用户点击一个单选框时，该单选框被设置为选中状态，同时其他的单选框都会被取消选中状态。在HTML中，我们可以使用checked属性来标记一个单选框是否被选中，例如：

```

```

在Vue中，我们不需要直接操作DOM元素来设置单选框的选中状态。相反，在使用v-model指令时，Vue会自动管理单选框的选中状态。当我们将v-model指令绑定到一个变量上时，该变量的值就代表当前选中的单选框的值。而当用户点击一个单选框时，Vue会根据该单选框的值将变量的值更新为相应的值。

当然，我们也可以使用值为true和false的变量来实现单选框的选中状态。例如：

```

```

在上面的例子中，我们使用一个值为true和false的变量isMale来代表选中的单选框。这里需要注意的是，由于我们没有为单选框指定value属性，所以当isMale的值为true时，第一个单选框被选中，当isMale的值为false时，第二个单选框被选中。同时，我们在模板中使用了三元表达式来展示当前选中的性别。

总的来说，Vue中的单选框使用起来非常简单，只需要掌握v-model指令的使用即可。无论是使用字符串类型的变量还是使用Boolean类型的变量，都可以轻松实现单选框的选中状态。