在前端开发过程中，我们经常需要实现复选框和单选框的功能，而 vue-checkbox-radio 就是一个 JavaScript 库，能够对 Vue.js 应用程序中的复选框和单选框进行操作。使用这个库，我们可以方便地创建出漂亮且易于使用的复选框和单选框。本文将详细介绍 vue-checkbox-radio 的用法，并且提供实例代码供读者参考。
安装 vue-checkbox-radio
我们可以通过 npm 来安装 vue-checkbox-radio：
npm install vue-checkbox-radio --save
安装完成后，在 Vue 应用程序中引入 vue-checkbox-radio：
import VueCheckboxRadio from 'vue-checkbox-radio'; Vue.use(VueCheckboxRadio);
这样，我们就可以开始使用 vue-checkbox-radio 了。
创建复选框和单选框
首先，我们需要创建出一个包含复选框和单选框的表单。我们可以通过 template 来创建，如下所示：
-- -------------------- ---- -------
----------
-----
------------ -----------
-----
-------
---------- --------------- ------------------------
---
--------
------
-----
-------
---------- --------------- --------------------------
-----
--------
------
-----
-------
---------- --------------- -------------------------
----
--------
------
------
-----------在这个例子中，我们创建了三个单选框，每个单选框对应着一个颜色。这里的 v-model 指令用来与 color 双向绑定，value 指令指定每个单选框的值。
接下来，我们来创建复选框。同样，我们可以通过 template 来创建，如下所示：
-- -------------------- ---- -------
----------
-----
------------ ------------
-----
-------
------------- --------------- -----------------------------
-----
--------
------
-----
-------
------------- --------------- ------------------------------
------
--------
------
-----
-------
------------- --------------- ------------------------------
------
--------
------
------
-----------这个例子中，我们创建了三个复选框，每个复选框对应着一种水果。和单选框一样，v-model 指令用来与 fruit 双向绑定，value 指令指定每个复选框的值。
设置默认值
默认情况下，复选框和单选框都是未选中的状态。我们可以通过设置 data 中的值来指定默认选中的选项。例如：
data: {
fruit: ['banana'],
color: 'red'
}这样，当我们打开该页面的时候，banana 复选框和 red 单选框就都被默认选中了。
获取选中值
在上面的例子中，我们使用了 v-model 指令来实现双向绑定，这样当用户勾选或取消一个选项的时候，对应的值就会自动更新。因此，我们可以通过读取对应的 data 中的值来获取用户的选择。例如：
console.log(this.color); // 获取单选框选择的颜色 console.log(this.fruit); // 获取复选框选择的水果
使用样式
vue-checkbox-radio 提供了多种内置样式，可以让我们快速创建出漂亮且易于使用的复选框和单选框。在使用样式之前，需要先将构建好的 CSS 样式文件引入到我们的应用程序中：
<link rel="stylesheet" href="path/to/vue-checkbox-radio-css-file.css">
通过在相应的标签上添加 class，可以使用内置样式。例如：
<vue-checkbox class="vc-checkbox-primary"></vue-checkbox> <vue-radio class="vc-radio-primary"></vue-radio>
vue-checkbox-radio 提供了以下内置样式：
- vc-checkbox-primary
- vc-checkbox-success
- vc-checkbox-warning
- vc-checkbox-danger
- vc-radio-primary
- vc-radio-success
- vc-radio-warning
- vc-radio-danger
除了内置样式之外，我们也可以自定义样式。例如：
<vue-checkbox class="my-custom-class"></vue-checkbox> <vue-radio class="my-custom-class"></vue-radio>
在 CSS 文件中，我们可以编写自己的样式：
.my-custom-class input[type="checkbox"]:checked + .vc-checkbox-inner {
background-color: red;
}这个样式将设置选中的复选框的背景色为红色。
总结
本文介绍了 vue-checkbox-radio 的用法，以及如何创建复选框和单选框、设置默认值、获取选中值、使用样式等。通过这篇教程，相信想要学习 vue-checkbox-radio 的读者可以轻松地上手。如果读者有任何疑问，也可以在评论区留言，我会竭诚为您解答。最后附上完整的示例代码，供读者参考：
-- -------------------- ---- -------
----------
-----
------------ ------------
-----
-------
------------- --------------- -----------------------------
-----
--------
------
-----
-------
------------- --------------- ------------------------------
------
--------
------
-----
-------
------------- --------------- ------------------------------
------
--------
------
------------ -----------
-----
-------
---------- --------------- ------------------------
---
--------
------
-----
-------
---------- --------------- --------------------------
-----
--------
------
-----
-------
---------- --------------- -------------------------
----
--------
------
--------- -- ----- ------
--------- -- ----- ------
------
-----------
--------
------ ---------------- ---- ---------------------
------ ------- -
----------- -
----------------
--
------ -
------ -
------ -----------
------ -----
-
-
-
---------
-------
---------------- ------------------------------ - ------------------ -
----------------- ----
-
--------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056ea081e8991b448e7658