Vue.js- v-model和v-bind之间的区别

Question

我是Vue.js的新手,我正在学习Udemy的在线课程.导师给了我一些练习.其中一个练习是使用默认值创建输入文本.我使用v-model做得非常好.但是,教师使用了v-bind:value,我不明白为什么.

有人可以给我一个简单的解释,说明这两者之间的差异,以及何时更好地使用每一个？

Answer 1

从这里开始 - 记住:

<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-model,input type=date则可以使用.如果你想在你的模型中使用日期对象(一旦你要操作或格式化它们就是一个好主意),这样做.

Answer 2

简单来说 v-model就是双向绑定意味着:如果改变输入值,有界数据将被改变,反之亦然.

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

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

Answer 3

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>

Answer 4

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

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

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

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

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

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