怎么在vue中使用v-model?針對這個問題,這篇文章詳細介紹了相對應的分析和解答,希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
v-model本質上是一個語法糖。如下代碼本質上是<
input :value="test" @input="test = $event.target.value">
,其中@input是對輸入事件的一個監聽:value="test"是將監聽事件中的數據放入到input,下面代碼是v-model的一個簡單的例子。在這邊需要強調一點,v-model不僅可以給input賦值還可以獲取input中的數據,而且數據的獲取是實時的,因為語法糖中是用@input對輸入框進行監聽的。可以在如下div中加入
{{ test}}
獲取input數據,然后去修改input中數據會發現中數據隨之改變。1.v-model在input的下拉框、單選按鈕、復選框中的應用
如下面代碼,分別是v-model在input不同的組件中的應用,但是大體用法相同。注意:像下面代碼中復選框這樣需要接收多條數據的情況下,在data里面應該由數組與其對應二不是字符串。
這里有一個值綁定的問題,不管是下拉框或者單選按鈕還是復選框,我們都可以在對應的標簽內設置value。以下拉框為例,我們在
這里還有一個和vue無關的問題,比較簡單,但是由于平時主要做后臺java開發沒太注意這個前端問題。以下面的單選按鈕代碼為例,
Selected: {{ selected }}
Picked: {{ picked }}
Checked names: {{ checkedNames }}
2.v-model修飾符
v-model也可以和.lazy、.trim和.number這些修飾符一起使用。
.trim和.number的用法比較簡單,這里就不做過多解釋。.lazy相當于一個延遲加載的過程。在上面我們講過相當于一個語法糖,
而則相當將input的實時更新改為一個change事件,v-model.lazy只有當焦點移除input時才會觸發事件。下圖1位v-model效果,圖2位v-model.lazy效果。
下面在單獨給大家介紹下vue中v-model使用
v-model用于表單數據的雙向綁定,其實它就是一個語法糖,這個背后就做了兩個操作:
??1. v-bind綁定一個value屬性
??2. v-on指令給當前元素綁定input事件
自定義組件使用v-model,應該有以下操作:
1. 接收一個value prop
2. 觸發input事件,并傳入新值
在原生表單元素中:
相當于
在自定義組件中
相當于
這個時候,inputValue接受的值就是input事件的回調函數的第一個參數,所以在自定義組件中,要實現數據綁定,還需要$emit去觸發input的事件。
this.$emit('input', value)
關于怎么在vue中使用v-model問題的解答就分享到這里了,希望以上內容可以對大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關注創新互聯行業資訊頻道了解更多相關知識。