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

Question

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

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

Answer 1

来自 here -记住:

<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 是一个表单输入的双向绑定(bind)。它结合了 v-bind，将一个 js 值 引入到标记中，并将 v-on:input 结合到 em>更新 js 值。 js 值必须存在于您的 data 或 inject 中。

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

v-model works with all the basic HTML input types(文本、文本区域、数字、单选、复选框、选择)。如果您的模型将日期存储为 ISO 字符串 (yyyy-mm-dd)，您可以将 v-model 与 input type=date 一起使用。如果您想在模型中使用日期对象(当您要操作或格式化它们时，这是一个好主意)，do this。

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

v-model 也有修饰符 .lazy、.trim、.number，覆盖在 the doc 中。