VUE3--雙向綁定v-model指令
1、定義
v-model 指令用來在 input、select、textarea、checkbox、radio 等表單控件元素上,并創(chuàng)建雙向數(shù)據(jù)綁定,根據(jù)表單上的值,自動(dòng)更新綁定的元素的值。即v-model數(shù)據(jù)既能從view流向model,也能從model流向view。我們可以將后臺(tái)的查詢數(shù)據(jù)等操作,通過異步請(qǐng)求,放在created或者mounted等鉤子函數(shù)中,查詢到的數(shù)據(jù)可以處理后自動(dòng)傳給view層。
2、使用場(chǎng)景
表單提交是開發(fā)中常見功能,也是和用戶交互的重要手段:例如用戶在登錄、注冊(cè)時(shí)需要提交賬號(hào)密碼;如用戶在檢索、創(chuàng)建、更新信息時(shí),需要提交一些數(shù)據(jù); 這些都要求在代碼邏輯中獲取到用戶提交的數(shù)據(jù),通常會(huì)使用v-model指令來完成。
3、v-model修飾符 - lazy
v-model在進(jìn)行雙向綁定時(shí),綁定的是input事件,那么會(huì)在每次內(nèi)容輸入后就將最新的值和綁定的屬性進(jìn)行同步。如果我們?cè)趘-model后跟上lazy修飾符,那么會(huì)將綁定的事件切換為 change 事件,只有在提交時(shí)(比如回車)才會(huì)觸發(fā)。

案例中值是在template中固定好的,但在真實(shí)開發(fā)中,數(shù)據(jù)是來自服務(wù)器的,可以先將值請(qǐng)求下來,綁定到data返回的對(duì)象中,再通過v-bind來進(jìn)行值的綁定,這個(gè)過程就是值綁定。