在 Vue.js 中，v-model 指令是一个常用的双向数据绑定指令，它可以轻松地将表单元素的值与 Vue 实例的数据进行双向数据绑定。而且掌握 v-model 的使用技巧，也是我们作为前端开发人员的一个基本素质。本篇文章将为大家详细介绍 v-model 的使用技巧，并提供示例代码。
为什么要使用 v-model？
v-model 的作用主要是在表单元素（如输入框、选择框、单选框、复选框等）与 Vue 实例的数据之间建立双向数据绑定。它可以轻松地监听表单元素的输入事件，同时将表单元素的值实时同步到 Vue 实例中对应的数据属性，也可以同步将数据属性的值实时渲染到表单元素上，使表单元素与数据属性的值保持同步，减少重复的代码和手动更新操作，提高开发效率。
v-model 的使用方法
在 Vue.js 中，v-model 指令的使用方法如下：
<input v-model="message" />
在上面的代码中，我们将数据属性 message 绑定到输入框的 value 属性上，当输入框的值改变时，数据属性 message 的值也会相应改变，反之，当数据属性 message 的值改变时，输入框的值也会相应改变。
v-model 不仅可以与普通的字符串数据类型绑定，也可以与对象或数组进行绑定，在这种情况下它就变成了一个“值转换器”。例如：
<input v-model="checked" type="checkbox" :true-value="1" :false-value="0" />
在上面的代码中，我们将数据属性 checked 绑定到复选框的 checked 属性上，并使用 true-value 和 false-value 属性指定勾选和不勾选时的值分别为 1 和 0。
此外，对于一些表单元素，如单选框和复选框，原生的 checked 和 selected 属性可能不够用，可以使用 Vue 的 binding 表达式来实现动态绑定。例如：
<input type="radio" v-model="picked" :value="a" /> <input type="radio" v-model="picked" :value="b" />
在上面的代码中，我们将数据属性 picked 与两个单选框绑定，:value 属性指定值为 a 和 b，用户选中其中一个单选框时，picked 的值就会被同步为相应的值。
v-model 的使用技巧
1. 自定义 Input 组件绑定
在一些场景中，我们需要自定义 input 组件，例如添加输入框的前缀或后缀，并且希望能够像普通 input 组件一样使用 v-model 进行双向数据绑定。为了实现这个效果，我们需要在组件内部使用 v-model 和 $emit('input') 来实现输入框的双向绑定。例如：
-- -------------------- ---- -------
----------
---- ----------------------
----- ----------------------- ------ ---------
------ ------------------- --------------- ----------------- -------------- ---------------------- --------------------- --
----- ----------------------- ------ ---------
------
-----------
--------
------ ------- -
----- ----------
------ -
------ -
----- -------
-------- ---
--
------- -
----- -------
-------- ---
--
------- -
----- -------
-------- ---
--
--
-
---------在上面的代码中，我们自定义了一个名为 MyInput 的组件，为了支持 v-model，我们定义了一个名为 value 的 props 属性，并在组件内部使用了 $attrs 和 $listeners 来传递输入框的其它属性和事件。同时，在输入框的 input 事件中，我们使用了 $emit('input', $event.target.value) 来触发组件的值变更事件，从而实现输入框的双向绑定。
2. 将 v-model 用于组件
除了普通的表单元素外，我们还可以将 v-model 用于自定义组件中，从而实现组件与父组件的双向数据绑定。为了支持 v-model，我们需要在组件内部定义一个 value 属性，并使用 $emit('input', value) 在组件的值变更时触发 input 事件。例如：
-- -------------------- ---- -------
----------
---- ---------------------
------- ------------------------
-------- ------------- ---------
------- ------------------------
------
-----------
--------
------ ------- -
----- --------------
------ -
------ -
----- -------
-------- --
--
--
------ -
------ -
-------------- -----------
-
--
-------- -
------ -
--------------------
------------------- -------------------
--
------ -
--------------------
------------------- -------------------
--
--
-
---------在上面的代码中，我们自定义了一个名为 MyComponent 的组件，并定义了一个 value 的 props 属性和一个 internalValue 的数据属性，用于数据的传递和管理。在组件内部，我们定义了两个用于修改 internalValue 的方法 incr 和 decr，并在这两个方法中使用 $emit('input', this.internalValue) 触发 input 事件，从而实现组件的双向绑定。使用 MyComponent 组件时，我们可以像使用普通表单元素一样，将数据属性与组件的 v-model 绑定，实现父子组件的双向数据绑定。
-- -------------------- ---- -------
----------
---- -------------------------
------------- --------------- --
-------- ----- ---------
------
-----------
--------
------ ----------- ---- -------------------
------ ------- -
----- ------------------
----------- -
------------
--
------ -
------ -
------ --
-
--
-
---------在上面的代码中，我们将数据属性 count 与 MyComponent 组件的 v-model 绑定，当 MyComponent 组件内部的值发生变化时，父组件的 count 属性也会相应更新，同时，当父组件的 count 属性发生变化时，MyComponent 组件的值也会相应更新，实现了双向数据绑定。
总结
以上就是本文的内容，我们详细介绍了 Vue.js 2.0 中 v-model 的使用方法和使用技巧，并提供了示例代码。相信通过阅读本文，你已经可以熟练使用 v-model 了。同时，我们也希望本文能够帮助大家掌握一些 Vue.js 开发的基础知识，提高开发效率和代码质量，为前端开发带来更多的便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d45640b5eee0b525be6189