在使用 Vue.js 开发前端应用时，经常会遇到数据绑定到 input 框时无法输入的问题。这种情况主要是由于 Vue.js 对 input 框的双向数据绑定机制造成的。
双向数据绑定机制
Vue.js 的双向数据绑定机制是指，当数据发生改变时，视图也会相应地更新；当视图发生改变时，数据也会同步地被更新。这个机制是非常有用的，能够大大提高开发效率。但是当我们将数据绑定到 input 框时，就会遇到一些问题。
数据绑定到 input 框无法输入的问题
当我们通过 v-model 指令将数据绑定到 input 框时，如果我们手动修改了 input 框的内容，就会发现 input 框的内容会立即被重置为原来的值。这是因为 Vue.js 会立即将这个值更新回数据模型中。
-- -------------------- ---- -------
----------
-----
------ ----------- ----------------- --
------- ------- --------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ------- ---------
--
--
--
---------上面的代码中，我们将数据 message 绑定到了 input 框，并在下面展示了数据的值。当我们手动修改 input 框的内容时，下面展示的数据也会被修改，但是当我们松开输入框时，又会回到原来的值。
这种情况显然不是我们想要的，因为用户无法输入自己的内容。下面我们来解决这个问题。
解决方法
要解决这个问题，我们可以通过给 input 框绑定 input 事件来实现。当 input 框的内容被修改时，我们手动更新数据模型中的值。
-- -------------------- ---- -------
----------
-----
------ ----------- ---------------- ---------------------- --
------- ------- --------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ------- ---------
--
--
-------- -
-------------------- -
------------ - -------------------
--
--
--
---------上面的代码中，我们去掉了 v-model，改为绑定 value 和 input 事件。当 input 框的内容发生变化时，会触发 updateMessage 方法，并更新数据模型中的 message。
结论
在 Vue.js 中，双向数据绑定机制虽然非常有用，但是在 input 框上会导致无法输入的问题。我们可以通过绑定 value 和 input 事件来解决这个问题。这种解决方法同样适用于其他表单元素，例如 textarea 和 select。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66efb83e6fbf960197309bce