Vue.js——v-model 和 v-bind 的区别

Question

我正在通过在线课程学习 Vue，讲师给了我一个练习，让我使用默认值输入文本。我使用 v-model 完成了它，但是，教练选择了 v-bind:value 我不明白为什么。

有人可以简单解释一下这两者之间的区别以及何时更好地使用它们吗？

原文由 Gustavo Dias 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

从 这里- 记住：

 <input v-model="something">

本质上是一样的：

 <input
   v-bind:value="something"
   v-on:input="something = $event.target.value"
>

或（速记语法）：

 <input
   :value="something"
   @input="something = $event.target.value"
>

所以 v-model 是 表单输入的双向绑定。它结合了 v-bind 将 js 值 带入标记和 v-on:input 以 _更新 js 值_。 js 值必须存在于您的 data 或 inject 中。

尽可能使用 v-model 。必须使用 v-bind / v-on :-) 我希望您的回答被接受。

v-model 适用于所有基本的 HTML 输入类型（文本、文本区域、数字、单选、复选框、选择）。如果您的模型将日期存储为 ISO 字符串 (yyyy-mm-dd)，您可以使用 v-model 和 input type=date 。如果您想在模型中使用日期对象（当您要操作或格式化它们时，这是一个好主意）， 请执行此 操作。

v-model 有一些额外的聪明之处，需要注意。如果您使用的是 IME（大量移动键盘，或中文/日文/韩文），则 v-model 将在一个单词完成之前更新（输入空格或用户离开该字段）。 v-input 会更频繁地触发。

v-model .number .trim 修饰符 .lazy 2595ECB6287382E6C06C063-

原文由 bbsimonbb 发布，翻译遵循 CC BY-SA 4.0 许可协议