2017-02-15 36 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。偉大的總結!非常感謝你! –