Vue.js 中单选按钮如何默认选中？

2024-03-27 17:12:56

在 Vue.js 中使单选按钮默认选中

介绍

在构建 Web 应用程序时，单选按钮是常见的用户界面元素，允许用户从一组选项中选择一个。在某些情况下，我们希望在页面加载时默认选中特定单选按钮。在本文中，我们将探索如何在 Vue.js 中实现此功能。

设置默认值

在 Vue.js 中，要默认选中单选按钮，我们需要使用 v-model 指令和一个初始值。v-model 指令用于绑定数据属性和表单元素。让我们看一个示例：

<input type="radio" value="option1" v-model="selectedOption" v-bind:checked="true" /> Option 1
<input type="radio" value="option2" v-model="selectedOption" /> Option 2

new Vue({
  el: '#demo',
  data: {
    selectedOption: 'option1' // 默认选中 "option1"
  }
});

在这里，我们使用 v-model 指令将 selectedOption 数据属性绑定到单选按钮组。我们还将 selectedOption 的初始值设置为 "option1"，这将导致第一个单选按钮（"Option 1"）在页面加载时默认选中。

处理更改事件

在某些情况下，我们可能希望在单选按钮更改时执行特定操作，例如隐藏或显示 div。要做到这一点，我们需要监听 change 事件：

methods: {
  onChange: function() {
    // 你的代码来隐藏或显示 div
  }
}

当单选按钮更改时，onChange 方法将被触发，你可以使用它来执行所需的逻辑。

常见问题解答

1. 如何在不使用初始值的情况下默认选中单选按钮？

可以使用 ref 属性来解决此问题。例如：

<input type="radio" value="option1" ref="radio1" /> Option 1
<input type="radio" value="option2" ref="radio2" /> Option 2

mounted() {
  this.$refs.radio1.checked = true; // 默认选中 "option1"
}

2. 为什么 v-model 指令不起作用？

确保 v-model 指令与 name 或 v-bind:value 属性一起使用，以明确绑定目标输入元素。

3. 如何禁用单选按钮？

使用 disabled 属性禁用单选按钮：

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

4. 如何对单选按钮进行分组？

使用 name 属性为单选按钮组进行分组：

<input type="radio" name="group1" value="option1" v-model="selectedOption" /> Option 1
<input type="radio" name="group1" value="option2" v-model="selectedOption" /> Option 2