vue .js - v-model和v-bind的区别

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

谁能给我简单解释一下这两者之间的区别，以及什么时候分别使用更好?

当前回答

v模型它是双向数据绑定，它用于绑定HTML输入元素，当你改变输入值时，有界数据将会改变。

v-model仅用于HTML输入元素

ex: <input type="text" v-model="name" >

v-bind 这是数据绑定的一种方式，意味着你只能将数据绑定到输入元素，但不能改变有界数据改变输入元素。 V-bind用于绑定HTML属性例: <input type="text" v-bind:class="abc" v-bind:value=" > .

<a v-bind:href="home/abc" > click me </a>

其他回答

V-model是双向绑定的意思是:如果你改变输入值，绑定的数据也会改变，反之亦然。但是v-bind:value被称为单向绑定，这意味着:你可以通过改变绑定数据来改变输入值，但你不能通过改变元素的输入值来改变绑定数据。

V-model用于表单元素。它允许您将表单元素(例如文本输入)与Vue实例中的数据对象绑定在一起。

例如:https://jsfiddle.net/jamesbrndwgn/j2yb9zt1/1/

V-bind用于与组件一起创建自定义道具。这允许您将数据传递给组件。由于道具是响应式的，如果传递给组件的数据发生了变化，那么组件将反映这一变化

Example: https://jsfiddle.net/jamesbrndwgn/ws5kad1c/3/

希望这能帮助你基本理解。

有些情况下你不想使用v模型。如果您有两个输入，并且每个输入都相互依赖，那么您可能会遇到循环引用问题。常见的用例是如果您正在构建一个会计计算器。

在这些情况下，使用监视器或计算属性都不是一个好主意。

相反，使用你的v-model并按照上面的答案拆分它

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

在实践中，如果您以这种方式解耦逻辑，您可能会调用一个方法。

这是它在现实世界中的样子:

v模型它是双向数据绑定，它用于绑定HTML输入元素，当你改变输入值时，有界数据将会改变。

v-model仅用于HTML输入元素

ex: <input type="text" v-model="name" >

<a v-bind:href="home/abc" > click me </a>

简单地说 V-model是双向绑定的意思是:如果你改变输入值，绑定的数据也会改变，反之亦然。

但是v-bind:value被称为单向绑定，这意味着:你可以通过改变绑定数据来改变输入值，但你不能通过改变元素的输入值来改变绑定数据。

看看这个简单的例子:https://jsfiddle.net/gs0kphvc/

从这里开始—— 记住:

<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值必须出现在你的数据中，或者在一个注入中。

尽可能使用v型。我希望你的回答被接受了。

v-model适用于所有基本的HTML输入类型(文本，文本区域，数字，单选，复选框，选择)。如果你的模型将日期存储为ISO字符串(yyyy-mm-dd)，你可以使用输入type=date的v-model。如果你想在你的模型中使用日期对象(当你打算操作或格式化它们时，这是个好主意)，那么就这样做。

v型模特有一些额外的智慧，这是很好的意识。如果你使用的是输入法(很多移动键盘，或者中文/日语/韩语)，v-model将不会更新，直到一个单词完成(输入空格或用户离开字段)。v输入会更频繁地触发。

V-model也有修饰符。lazy， .trim， .number，覆盖在文档中。

推荐文章