v model語法糖在元件中的使用

2022-06-23 21:09:09 字數 963 閱讀 4041

v-model 主要是用於表單上資料的雙向繫結

1:主要用於 input,select,textarea,component

2:修飾符:

.lazy- 取代input監聽change事件

.number- 輸入字串轉為數字

.trim- 輸入首尾空格過濾

此時mes值就與input的值進行雙向繫結

實際上上面的**是下面**的語法糖。

要理解這行**,首先你要知道 input 元素本身有個 oninput 事件,這是 html5 新增加的,類似     onchange ,每當輸入框內容發生變化,就會觸發 oninput ,把最新的value傳遞給 mes。從而實      現了v-model

我們知道v-model可以實現資料的雙向繫結,但是,如果說這是一個複雜的輸入框,在專案中也經常使用。此時我們我們就把這個1輸入框封裝成元件,那怎麼利用v-mode讓父元件的值與子元件input框裡的值雙向繫結起來。看下面的例子

1:父元件

根據上面講的v-model語法糖,所以 inputbox那行**也可以寫成

2:子元件

所以說:1:接受一個value  prop    2:在有新的值時觸發input事件並將新值作為引數  。這樣,我們就可以看到子元件和父元件的值就可以聯動起來。但是我們看到v-model中的事件是input,如果碰到單選核取按鈕這種check事件,那我們就需要去自定義v-model,我們來看看第四節

1:父元件還是一樣的寫

但是單選核取方塊不會觸發input事件,只會觸發change事件。所以在子元件我們需要自定義v-model。我們來看看**哈

2:

這樣就可以了

vue2進階之v model在元件上的使用

v model 用在 input 元素上時 v model雖然很像使用了雙向資料繫結的 angular 的 ng model,但是 vue 是單項資料流,v model 只是語法糖而已 第一行的 其實只是第二行的語法糖 我們仔細觀察語法糖和原始語法那兩行 ,可以得出一個結論 在給 元素新增 v mo...