在 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 选中状态的示例代码：
-- -------------------- ---- -------
----------
-----
-------
------ ------------ ------------------ ----------------
------ -
--------
-------
------ ------------ ------------------ ----------------
------ -
--------
-------
------ ------------ ------------------ ----------------
------ -
--------
------------ -- -------- ------
------
-----------
--------
------ ------- -
------ -
------ -
--------- ---------
-
-
-
---------在上面的示例代码中，我们定义了一个名为 selected 的数据属性，并将其初始值设置为 'option1'。我们使用 v-model 指令将选中状态绑定到 selected 上，并在模板中显示选中的值。
总结
在 Vue.js 中，我们可以使用 v-model 指令来绑定 radio 的选中状态，从而实现数据的双向绑定。通过示例代码的演示，我们可以看到 v-model 指令的使用方法。对于初学者来说，掌握 v-model 指令的使用是非常重要的，它可以帮助我们更高效地开发 Vue.js 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/656d29bed2f5e1655d57cb35