前言:面試的時候,面試官說希望我們能不侷限於知道怎麼用,而是去了解為什麼要用,怎麼去實現,所以想來研究一下這個語法糖.
一、首先是v-model作用
二、初步改造v-model
>
<
/div>
"vue.min.js"
>
<
/script>
//全域性元件
vue.
component
('binddata1',}
`,data()
},methods:
,//改變input的值
handleinputchange
(e)}})
;new
vue(
)<
/script>
與v-model不同的是,在input中我用v-bind繫結了inputvalue的值…,繫結了change事件。存在不足的是,需要回車p中的inputvalue才會發生變化.
理解v-model
自定義元件 v-model
>
<
/div>
"lovin**al"
>
<
/base-checkbox>
//這裡的 lovin**ue 的值將會傳入這個名為 checked 的 prop。
// 同時當 觸發乙個 change 事件並附帶乙個新的值的時候,這個 lovin**ue 的屬性將會被更新。
vue.
component
('base-checkbox',,
props:})
newvue({
el:, template:
`
`<
/script>
需要注意的是仍然需要在props中宣告checked
v-model修飾符
.lazy
雙向資料繫結的特性是:當 input 標籤顯示的值實時變化時,也會實時的觸發 input 標籤上的 input 事件,在每次 input 事件觸發後將輸入框的值與資料實時進行同步。 在一些特殊的需求和場景下,你可能希望資料同步不是實時同步而是在觸發 change 事件的時候進行資料同步,可以新增 lazy 修飾符進行處理,使用的示例如下:
"msg"
>
.number
在表單中處理輸入驗證必須是數字時,可以在 v-model 上加上 number 修飾符,將使用者輸入的值自動轉換成數字型別。.trim
對於使用者在表單標籤中輸入的字串,去除首尾的空白字元,使用trim 修飾符。
"msg"
>
語法糖的理解
語法糖 syntactic sugar 也譯為糖衣語法,是由英國計算機科學家彼得 約翰 蘭達 peter j.landin 發明的乙個術語,指計算機語言中新增的某種語法,這種語法對語言的功能並沒有影響,但是更方便程式設計師使用。通常來說使用語法糖能夠增加程式的可讀性,從而減少程式 出錯的機會。程式設...
v model語法糖在元件中的使用
v model 主要是用於表單上資料的雙向繫結 1 主要用於 input,select,textarea,component 2 修飾符 lazy 取代input監聽change事件 number 輸入字串轉為數字 trim 輸入首尾空格過濾 此時mes值就與input的值進行雙向繫結 實際上上面的...
python 語法糖太多 python 語法糖
匿名函式 lamda表示式 def add x,y return x y 等價於f lamda x,y x y f 1,2 三元表示式 wefx 1 y 2 c x if x map對映關係 def square x return x x list x 1,3,10 list r map squar...