vue v-model — bind value

一次綁定value和event handler

索引index

基本用法

各種組件v-model範例: input, select, textarea

v-model修飾符(Modifier): v-model.lazy, v-model.number, v-model.trim

自訂component用法

react同情境寫法

基本用法

v-model算是語法糖，由vue去判斷並自動結合適合該component的value和事件(onInput, onChange …)，而如果v-model不符合使用，一樣可以使用一般的value和事件去搭配component

<input v-model=”value” />
<CustomComponent v-model="value" :yourValue="value" />

各種組件v-model範例: input, select, textarea

input: 可以綁定各種type=”radio”, type=”checkbox”, type=”text”

textarea: 如同input type=”text”一樣的綁定

select: 可以綁定單選或多選(multiple) select

各組件範例

v-model修飾符(Modifier)

1. v-model.lazy: 從預設的綁定onInput改為onChange
2. v-model.number: 適用於<input type=”number”>，value也會一併改為number
3. v-model.trim: 如同String.trim()方法，幫你修剪掉value的空白

自訂component寫法

1. 自訂component的<input>, <select>…等等的組件上需要分別綁定value和@input(或@change…等其他handler)
2. 自訂component上的handler使用$emit()把$event傳遞給上一層的組件
3. 在使用時將v-model加在你的自訂組件上

範例如下

react同情境寫法

react目前沒有類似的語法糖，只能手動綁定各value和handler

基本用法

<Component value=”” onChange=”” />

範例

官方文件參考

組件基本用法: https://vuejs.org/v2/guide/forms.html

自訂組件及進階用法: https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components