Vue.js 中如何使用 v-model 绑定 radio 选中状态

在 Vue.js 中，我们经常需要使用表单元素来收集用户数据。而 radio 是一种常见的表单元素，它允许用户从多个选项中选择一个。在 Vue.js 中，我们可以使用 v-model 指令来绑定 radio 的选中状态，从而实现数据的双向绑定。

v-model 指令

v-model 指令是 Vue.js 中的一个重要特性，它可以实现数据的双向绑定。在表单元素中，v-model 指令可以将表单元素的值和 Vue 实例中的数据属性绑定在一起，从而实现表单数据和 Vue 实例数据的同步更新。

在 radio 中使用 v-model 指令时，我们需要将 v-model 绑定到一个与 radio 对应的数据属性上。当用户选择一个 radio 选项时，v-model 指令会将选中的值赋值给数据属性，从而实现数据的更新。

示例代码

下面是一个使用 v-model 绑定 radio 选中状态的示例代码：

// javascriptcn.com 代码示例
<template>
  <div>
    <label>
      <input type="radio" v-model="selected" value="option1">
      Option 1
    </label>
    <label>
      <input type="radio" v-model="selected" value="option2">
      Option 2
    </label>
    <label>
      <input type="radio" v-model="selected" value="option3">
      Option 3
    </label>
    <p>Selected: {{ selected }}</p>
  </div>
</template>

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

在上面的示例代码中，我们定义了一个名为 selected 的数据属性，并将其初始值设置为 'option1'。我们使用 v-model 指令将选中状态绑定到 selected 上，并在模板中显示选中的值。

总结

在 Vue.js 中，我们可以使用 v-model 指令来绑定 radio 的选中状态，从而实现数据的双向绑定。通过示例代码的演示，我们可以看到 v-model 指令的使用方法。对于初学者来说，掌握 v-model 指令的使用是非常重要的，它可以帮助我们更高效地开发 Vue.js 应用程序。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656d29bed2f5e1655d57cb35