Vue.js 中如何巧用 v-model 控制单选按钮选中状态？

vue.js

2024-03-16 22:30:54

## Vue.js 中巧用 v-model 设置单选按钮选中状态

### 场景：

当我们使用 Vue.js 构建 web 应用时，经常需要通过单选按钮来让用户选择特定选项。我们希望根据某些条件，动态地设置单选按钮的选中状态。

### 解决之道：

解决这个问题的关键在于 v-model 指令，它可以将表单元素与 Vue.js 数据绑定。通过使用 v-model，我们可以控制表单元素的值，并在表单元素发生变化时更新数据。

### 操作步骤：

绑定 v-model：
```
<input type="radio" v-model="myData">
```
这将将单选按钮绑定到 Vue.js 数据对象 myData。
设置值：
```
<input type="radio" v-model="myData" value="option1">
```
使用 value 属性为单选按钮设置一个值。当选中此按钮时，它将把 myData 更新为 option1。
控制选中状态：
```
<input type="radio" v-model="myData" :checked="myData === 'option1'">
```
checked 属性允许我们根据某个条件（例如 myData === 'option1'）来设置选中状态。如果条件为 true，则按钮将被选中。

### 完整示例：

以下是使用 v-model 和 :checked 设置单选按钮选中状态的一个完整示例：

<template>
  <div v-for="option in options">
    <input
      type="radio"
      v-model="selectedOption"
      :value="option"
      :checked="option === currentOption"
    >
    {{ option }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: ['选项 1', '选项 2', '选项 3'],
      selectedOption: null,
      currentOption: '选项 1',
    };
  },
};
</script>

在这个示例中，我们使用 v-for 来遍历 options 数组，并为每个选项创建一个单选按钮。我们使用 v-model 将单选按钮绑定到 selectedOption 数据属性，并使用 value 属性设置选项的值。最后，我们使用 checked 属性来控制选中状态，根据 option 是否等于 currentOption 来设置选中状态。

### 结论：

通过巧妙运用 v-model 和 :checked 属性，我们可以在 Vue.js 中轻松地根据条件设置单选按钮的选中状态，从而为用户提供更加直观和动态的表单体验。

### 常见问题解答：