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

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

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

205981 次浏览
小开

From here - 记住:< / p > 

<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一起使用。如果你想在你的模型中使用日期对象(当你要操作或格式化它们时，这是一个好主意)，这样做. c。

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

v-model也有修饰符.lazy， .trim， .number，覆盖在医生中。

小开

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

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

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

小开
< p > v模型 < br > 它是双向数据绑定，用于绑定HTML输入元素，当你改变输入值时，有界数据将被改变

v-model仅用于HTML输入元素

ex: <input type="text" v-model="name" >
< p > v-bind < br > 这是数据绑定的一种方式，意味着你只能将数据绑定到输入元素，但不能改变有界数据改变输入元素。 V-bind用于绑定HTML属性 < br > 例:< br > <input type="text" v-bind:class="abc" v-bind:value=""> < br > < / p > 
<a v-bind:href="home/abc" > click me </a>
小开

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

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

相反，取你的v-model并按照上面的答案分割它

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

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="app">
<input :value="extendedCost" @input="_onInputExtendedCost" />
<p> \{\{ extendedCost }}
</div>


<script>
var app = new Vue({
el: "#app",
data: function(){
return {
extendedCost: 0,
}
},
methods: {
_onInputExtendedCost: function($event) {
this.extendedCost = parseInt($event.target.value);
// Go update other inputs here
}
}
});
</script>

小开

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

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

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

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

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

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


提交答案