2017-02-15 84 views
38

我是Vue.js的新手,我在Udemy的在线课程学习。教练通过了一些练习。其中一个练习是制作一个默认值的输入文本。我使用V模型做得非常好。但是,教师使用v-bind:值,我不明白为什么。Vue.js -v-model和v-bind之间的区别

有人可以给我一个关于这两者之间的区别和什么时候更好地使用每一个简单的解释?

+3

'v-model'主要用于输入和表单投标,所以当你处理各种输入类型时使用它.'v-bind'指令允许你通过输入一些JS表达式来产生一些动态值,在大多数情况下取决于来自数据模型的数据 - 所以想想v-bind是指令,当你想要处理一些动态的事情时应该使用它。 –

+2

在某些情况下,您可以使用它们中的每一个。有时候不是,例如:'

' - 你不能使用model绑定html属性,你应该使用'v-bind'指令。 对于表单的元素,您将需要使用'v-model'指令 - “它会根据输入类型自动选择更新元素的正确方法。” – Alexander

回答

86

here - 记住:

<input v-model="something"> 

只是语法糖:

<input 
    v-bind:value="something" 
    :value="something" (shorthand syntax) 
    v-on:input="something = $event.target.value" 
    @input="something = $event.target.value" (shorthand) 
> 

所以v-model双向的表单输入结合。它结合了v-bind,这带来了JS值到标记,并v-on:input更新JS值

当你可以的时候使用v-model。当你必须使用v-bind/v-on时:-)我希望你的答案被接受。

v-modelworks with all the basic HTML input types(text,textarea,number,radio,checkbox,select)。如果您的模型将日期存储为ISO字符串(yyyy-mm-dd),则可以使用v-modelinput type=date。如果您想在模型中使用日期对象(一旦您要操作或格式化它们,这是一个好主意),do this

+1

'尽可能使用v模型。必须'时使用v-bind/v-on。伟大的总结!非常感谢你! –

相关问题