在日常的前端开发工作中，经常会遇到需要处理多个复选框的情况。在 Vue.js 2.0 中，可以使用 v-model 指令绑定多个复选框的值，以实现数据的双向绑定。下面详细介绍在 Vue.js 2.0 中如何使用 v-model 绑定多个复选框的值。
绑定多个复选框的值
在 Vue.js 中，v-model 指令可以绑定单个复选框的值。但是，如果需要处理多个复选框时，我们需要使用数组来维护复选框的状态。可以通过定义一个 computed 计算属性来实现多个复选框值的绑定。
示例代码如下：
-- -------------------- ---- -------
----------
-----
------ --------------- ----------------------- ------------- --
-----------------
------ --------------- ----------------------- -------------- --
-----------------
------ --------------- ----------------------- -------------- --
-----------------
---------- ------------- ------
------
-----------
--------
------ ------- -
------ -
------ -
-------------- --
--
--
--------- -
------- -
----- -
------ -------------------
--
-------- -
------------------ - ----
-
-
-
--
---------在上面的代码中，我们定义了一个 checkedValues 数组来保存选中的值。同时，在模板中使用 v-model 指令来绑定每个复选框的值到 checkedValues 数组中。当复选框选中或者取消选中时，checkedValues 数组会自动更新复选框的状态。
我们还定义了一个 fruits 计算属性来获取和设置 checkedValues 数组，并将其绑定到模板中。当选中或取消选中复选框时，fruits 计算属性的 set 方法会被调用，在其中更新 checkedValues 数组的值。因此，可以通过 fruits 计算属性来实现复选框的值的绑定。
处理复选框的默认值
有时，在初始化时需要设置复选框的默认值。我们可以使用 created 生命周期钩子来设置默认值，然后实现多个复选框的绑定。
示例代码如下：
-- -------------------- ---- -------
----------
-----
------ --------------- ----------------------- ------------- --
-----------------
------ --------------- ----------------------- -------------- --
-----------------
------ --------------- ----------------------- -------------- --
-----------------
---------- ------------- ------
------
-----------
--------
------ ------- -
------ -
------ -
------- ---------- ----------
-------------- --
-
--
--------- -
---------- -
----- -
------ -------------------
--
-------- -
------------------ - ----
-
-
--
--------- -
------------------ - ------------
-
--
---------在上面的代码中，我们定义了一个 fruits 数组来保存默认选中的值。在 created 生命周期钩子中，将 checkedValues 数组设置为默认选中的值。然后，在模板中使用 v-model 指令绑定复选框的值，并将 checkedValues 数组绑定到 fruitList 计算属性中。这样，就可以实现复选框的双向绑定了。
总结
在 Vue.js 2.0 中，使用 v-model 指令可以绑定单个复选框的值。但是，处理多个复选框时，需要使用数组来维护复选框的状态，并使用计算属性实现复选框值的绑定。同时，也可以使用 created 生命周期钩子来设置复选框的默认值。以上是 Vue.js 2.0 中使用 v-model 绑定多个复选框的值的详细介绍和示例代码，希望对大家有学习和指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648d01a048841e9894b4cdb0