v-model 是 Vue.js 框架中的一个重要属性，它可以实现表单与数据之间的双向绑定，使得数据的变化可以自动反映在表单控件上，也可以通过表单控件的输入修改数据。本文将详细介绍如何在 Vue.js 中使用 v-model 实现表单双向绑定。
基本使用
在 Vue.js 的模板中，通过在表单控件上使用 v-model，可以实现表单控件与数据的双向绑定。例如：
<template>
<div>
<input v-model="message" type="text">
<p>{{ message }}</p>
</div>
</template>在这个例子中，我们在 input 控件上使用了 v-model="message"，表示将 input 的值与 message 数据双向绑定。当 input 的值发生改变时，message 数据也会发生对应的变化，反之亦然。同时，我们在页面中使用了插值语法 {{ message }} 来显示 message 数据的值。
值绑定
在有些情况下，我们需要绑定的不是一个字符串，而是一些复杂的数据类型。例如，我们需要绑定一个数组，在表单控件中使用一个多选框来显示和修改这个数组。这时，我们需要使用 :value 和 @input 来实现借助 v-model 实现实现复杂数据类型的双向绑定。
-- -------------------- ---- -------
----------
-----
----------- ------ ------
------ -------------- ------ -- ---------- -------------
------
---------------
--------------
----------------
----------------------------
- -- ----- --
--------
------
-----------
--------
------ ------- -
------ -
------ -
---------- ----- ---- ---- ---- -----
------- ----- ----
-
--
-------- -
-------------------------- -
----------- - --------------------
- ---------------- -------------------
- ------------------------ -- ----- --- --------------------
-
-
-
---------在这个例子中，我们使用了 v-for 渲染了所有的选项，并为每个选项设置了一个 value。然后，我们使用了 v-model 将选项的值与 colors 数组进行双向绑定。当 input 控件的选中状态发生改变时，我们使用 @input 监听 input 事件，并在 updateCheckedColors 方法中更新 colors 数组。需要注意的是，我们在 updateCheckedColors 方法中使用了数组展开符 ... 和 filter 方法来更新 colors 数组。
修饰符
在实际开发中，我们还需要使用一些 v-model 修饰符来实现一些特殊的功能。下面是一些常用的 v-model 修饰符：
.lazy
.lazy 修饰符只在处理用户输入时更新绑定的数据。也就是说，当表单控件失去焦点或者按下回车键时才会更新数据。
<template>
<div>
<input v-model.lazy="message" type="text">
<p>{{ message }}</p>
</div>
</template>.number
.number 修饰符可以将输入值转换为数值类型。
<template>
<div>
<input v-model.number="quantity" type="number">
<p>总价：{{ quantity * price }}</p>
</div>
</template>.trim
.trim 修饰符可以自动去掉输入值两侧的空格。
<template>
<div>
<input v-model.trim="username" type="text">
<p>{{ username }}</p>
</div>
</template>总结
在 Vue.js 中使用 v-model 实现表单双向绑定是非常方便和灵活的。通过本文的介绍和示例，希望可以帮助读者更好的理解和使用 v-model。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64bfbe709e06631ab9c3dab4