Javascript Vue.js——v-model 和 v-bind 的区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42260233/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue.js—Difference between v-model and v-bind
提问by Gustavo Dias
I'm learning Vue with an online course and the instructor gave me an exercise to make an input text with a default value. I completed it using v-model but, the instructor chose v-bind:value and I don't understand why.
我正在通过在线课程学习 Vue，讲师给了我一个练习，使输入文本具有默认值。我使用 v-model 完成了它，但是，讲师选择了 v-bind:value，我不明白为什么。
Can someone give me a simple explanation about the difference between these two and when it's better use each one?
有人可以简单解释一下这两者之间的区别以及何时最好使用它们吗？
回答by bbsimonbb
From here- Remember:
从这里开始- 记住：
<input v-model="something">
is essentially the same as:
本质上是一样的：
<input
v-bind:value="something"
v-on:input="something = $event.target.value"
>
or (shorthand syntax):
或（简写语法）：
<input
:value="something"
@input="something = $event.target.value"
>
So v-modelis a two-way binding for form inputs. It combines v-bind, which brings a js valueinto the markup, and v-on:inputto update the js value.
所以v-model是一个双向的表单输入绑定。它结合v-bind，这带来了一个JS值到标记，并v-on:input以更新JS值。
Use v-modelwhen you can. Use v-bind/v-onwhen you must :-) I hope your answer was accepted.
尽可能使用v-model。必须时使用v-bind/ v-on:-) 我希望你的回答被接受。
v-modelworks with all the basic HTML input types(text, textarea, number, radio, checkbox, select). You can use v-modelwith input type=dateif your model stores dates as ISO strings (yyyy-mm-dd). If you want to use date objects in your model (a good idea as soon as you're going to manipulate or format them), do this.
v-model适用于所有基本的 HTML 输入类型（文本、文本区域、数字、单选、复选框、选择）。如果您的模型将日期存储为 ISO 字符串 (yyyy-mm-dd)，您可以使用v-modelwith input type=date。如果您想在模型中使用日期对象（这是一个好主意，一旦您要操作或格式化它们），请执行此操作。
v-modelhas some extra smarts that it's good to be aware of. If you're using an IME ( lots of mobile keyboards, or Chinese/Japanese/Korean ), v-model will not update until a word is complete (a space is entered or the user leaves the field). v-inputwill fire much more frequently.
v-model有一些额外的智慧，这是很好的注意。如果您使用的是 IME（许多移动键盘，或中文/日文/韩文），则 v-model 在单词完成（输入空格或用户离开该字段）之前不会更新。v-input会更频繁地开火。
v-modelalso has modifiers .lazy, .trim, .number, covered in the doc.
v-model也有修饰符.lazy, .trim, .number, 包含在doc 中。
回答by Madmadi
In simple words
v-modelis for two way bindingsmeans: if you change input value, the bound data will be changed and vice versa.
简单来说
v-model就是两种方式绑定的意思：如果你改变输入值，绑定的数据就会改变，反之亦然。
but v-bind:valueis called one way bindingthat means: you can change input value by changing bound data but you can't change bound data by changing input value through the element.
但v-bind:value被称为单向绑定，这意味着：您可以通过更改绑定数据来更改输入值，但不能通过元素更改输入值来更改绑定数据。
check out this simple example: https://jsfiddle.net/gs0kphvc/
看看这个简单的例子：https: //jsfiddle.net/gs0kphvc/
回答by Prashant Gurav
v-model
it is two way data binding, it is used to bind html input element when you change input value then bounded data will be change.
v-model
它是双向数据绑定，用于在更改输入值时绑定 html 输入元素，然后绑定数据将更改。
v-model is used only for HTML input elements
v-model 仅用于 HTML 输入元素
ex: <input type="text" v-model="name" >
v-bind
it is one way data binding,means you can only bind data to input element but can't change bounded data changing input element.
v-bind is used to bind html attribute
ex: <input type="text" v-bind:class="abc" v-bind:value="">
v-bind
它是一种数据绑定方式，意味着您只能将数据绑定到输入元素，而不能更改有界数据更改输入元素。
v-bind 用于绑定 html 属性
ex:<input type="text" v-bind:class="abc" v-bind:value="">
<a v-bind:href="home/abc" > click me </a>
回答by Vincent Tang
There are cases where you don't want to use v-model. If you have two inputs, and each depend on each other, you might have circular referential issues. Common use cases is if you're building an accounting calculator.
有些情况下您不想使用v-model. 如果您有两个输入，并且每个输入都相互依赖，那么您可能会遇到循环引用问题。常见用例是您正在构建会计计算器。
In these cases, it's not a good idea to use either watchers or computed properties.
在这些情况下，使用观察者或计算属性都不是一个好主意。
Instead, take your v-modeland split it as above answer indicates
取而代之的是，v-model按照上面的答案将其拆分
<input
:value="something"
@input="something = $event.target.value"
>
In practice, if you are decoupling your logic this way, you'll probably be calling a method.
在实践中，如果您以这种方式解耦您的逻辑，您可能会调用一个方法。
This is what it would look like in a real world scenario:
这是在现实世界场景中的样子：
<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>回答by sda87
v-model is for two way bindings means: if you change input value, the bound data will be changed and vice versa. but v-bind:value is called one way binding that means: you can change input value by changing bound data but you can't change bound data by changing input value through the element.
v-model is intended to be used with form elements. It allows you to tie the form
element (e.g. a text input) with the data object in your Vue instance.
Example: https://jsfiddle.net/jamesbrndwgn/j2yb9zt1/1/
v-bind is intended to be used with components to create custom props. This allows you to pass data to a component. As the prop is reactive, if the data that's passed to the component changes then the component will reflect this change
Example: https://jsfiddle.net/jamesbrndwgn/ws5kad1c/3/
Hope this helps you with basic understanding
希望这可以帮助您进行基本的了解
