用ChatGPT解决这个技术问题 Extra ChatGPT

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

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

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

v-model 主要用于输入和表单竞价，因此在处理各种输入类型时使用它。v-bind 指令允许您通过键入一些 JS 表达式来产生一些动态值，该表达式在大多数情况下取决于数据模型中的数据- 所以当你想处理一些动态的事情时，你可以把 v-bind 看作是你应该使用的指令。
在某些情况下，您可以使用它们中的每一个。有时不是，例如：<div v-bind:class="{ active: isActive }"></div> - 你不能使用模型绑定 html 属性，你应该使用 v-bind 指令。对于表单的元素，您需要使用 v-model 指令——“它会根据输入类型自动选择正确的方式来更新元素。”
@Alexander 短语“绑定 HTML 属性”帮助我更好地思考这个问题。很高兴看到您对此进行权衡，并就这两个构造实际发生的情况提供更完整的答案。
@Alexander Esp 在组件 data 和 props 的上下文中...

t
tony19

来自 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 是一个表单输入的双向绑定。它结合了 v-bind，将 js 值 带入标记和 v-on:input 以更新 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 中进行了介绍。

'尽可能使用 v-model。必要时使用 v-bind/v-on'。很棒的总结！非常感谢！
v-model 和 v-bind:xxx.sync 有什么区别？
@ElMac v-model 是 Vue 组件和 javascript 模型之间的双向绑定。源（绑定的模型端）在 Vue 组件的数据中声明。像这样，Vue 允许您从组件中提取状态，然后直接从组件中修改此状态。这是一种简单的状态管理模式，是 Vue 的标志（在 Angular 和 React 中很难/隐藏/不可能/不鼓励）。 v-bind:xxx.sync 是 Vue 组件与其父组件之间的双向绑定]。状态保持封装状态。它“属于”父母。这不一定更好！
“本质上与” - 错误。当您使用 v-model 时，它会“接触”对象并且所有输入都将被重绘，即使是使用 v-bind 的输入。当您分配 something = $event.target.value - 它不会重绘
@Alex 你怎么知道的？它有什么实际区别？当您说“所有输入”时，您一次在一个输入上使用 v-model。
b
bbsimonbb

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

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

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

' 如果你改变输入值，绑定的数据也会改变，反之亦然。 ' - 即使从小提琴示例中也无法理解“反之亦然”部分。你能解释一下吗？
如果您通过元素更改输入值，则绑定数据将更改，并且如果您通过例如 Vue API 更改绑定数据，您的输入元素值也会更改。
如何通过 Vue API 更改绑定数据？
在小提琴示例中，假设我们有一个像这样 this.data_source = 'Some new value' 更改 data_source 的方法
data_source 是指从 input 注入 DOM 的 HTML，对吗？
P
Prashant Gurav

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 它是两种方式的数据绑定'：这两种方式具体是什么？
T
Takeshi Tokugawa YD

v-model 用于两种方式的绑定意味着：如果您更改输入值，则绑定的数据将被更改，反之亦然。但是 v-bind:value 被称为单向绑定，这意味着：您可以通过更改绑定数据来更改输入值，但不能通过通过元素更改输入值来更改绑定数据。

v-model 旨在与表单元素一起使用。它允许您将表单元素（例如文本输入）与 Vue 实例中的数据对象联系起来。

示例：https://jsfiddle.net/jamesbrndwgn/j2yb9zt1/1/

v-bind 旨在与组件一起使用以创建自定义道具。这允许您将数据传递给组件。由于 prop 是响应式的，如果传递给组件的数据发生更改，则组件将反映此更改 

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

希望这可以帮助您进行基本的了解。

V
Vincent Tang

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

在这些情况下，使用观察者或计算属性都不是一个好主意。

取而代之的是，将您的 v-model 拆分为上述答案所示 

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

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

这就是它在现实世界场景中的样子：

{{ extendedCost }}