我正在通过在线课程学习 Vue，讲师给了我一个练习，使输入文本具有默认值。我使用v-model但是完成了它，导师选择了v-bind:value，我不明白为什么。
有人可以简单解释一下这两者之间的区别以及何时更好地使用它们吗？
Vue.js——v-model 和 v-bind 的区别
IT技术
javascript
mvvm
frameworks
vue.js
frontend
2021-01-27 19:55:17
5个回答
从这里开始- 记住：
<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值。
尽可能使用v-model。必须时使用v-bind/ v-on:-) 我希望你的回答被接受。
v-model 适用于所有基本的 HTML 输入类型（文本、文本区域、数字、单选、复选框、选择）。如果您的模型将日期存储为 ISO 字符串 (yyyy-mm-dd)，您可以使用v-modelwith input type=date。如果您想在模型中使用日期对象（这是一个好主意，一旦您要操作或格式化它们），请执行此操作。
v-model有一些额外的智慧，这是很好的注意。如果您使用的是 IME（许多移动键盘，或中文/日文/韩文），则 v-model 不会更新，直到单词完成（输入空格或用户离开该字段）。v-input会更频繁地开火。
v-model也有修饰语.lazy，.trim，.number，覆盖的文档。
简单来说
v-model就是两种方式绑定的意思：如果你改变输入值，绑定的数据就会改变，反之亦然。
但v-bind:value被称为单向绑定，这意味着：您可以通过更改绑定数据来更改输入值，但不能通过元素更改输入值来更改绑定数据。
看看这个简单的例子：https : //jsfiddle.net/gs0kphvc/
v-model
它是双向数据绑定，用于在更改输入值时绑定 html 输入元素，然后绑定数据将更改。
v-model 仅用于 HTML 输入元素
ex: <input type="text" v-model="name" >
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>
v-model 用于双向绑定意味着：如果您更改输入值，则绑定的数据将更改，反之亦然。但是 v-bind:value 被称为单向绑定，这意味着：您可以通过更改绑定数据来更改输入值，但不能通过通过元素更改输入值来更改绑定数据。
v-model 旨在与表单元素一起使用。它允许您将表单元素（例如文本输入）与 Vue 实例中的数据对象联系起来。
示例：https : //jsfiddle.net/jamesbrndwgn/j2yb9zt1/1/
v-bind 旨在与组件一起使用以创建自定义props。这允许您将数据传递给组件。由于 prop 是响应式的，如果传递给组件的数据发生变化，那么组件将反映这种变化
Example: https://jsfiddle.net/jamesbrndwgn/ws5kad1c/3/
希望这可以帮助您进行基本的了解。
有些情况下您不想使用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>