v-model 與.修飾符

修飾符可以加在v-on或v-model上面(這裡專注探討v-model.修飾符)

v-model.lazy=""

• 當我們綁定表單上v-model與某個變數資料，我們在表單方框內輸入文字時，一般而言是會同步出現在vue資料上，因為雙向綁定的關係
• 而當我們使用lazy的修飾符可以讓vue元件裡面綁定的資料不會馬上同步顯示我們在表單上輸入的內容，而是會等我們按下enter或是點選框框的滑鼠行為，才會將內容一次顯示在vue元件裡
• 這其實可以用在綁定在我們html的change事件上面，當我們在選取select表單選項是按下滑鼠或是enter才確定我們的option才需要同步顯現資料到vue元件上去觸發事件

v-model.number=""

• 我們在表單輸入框(input[type="text"]時)不管輸入文字還是數字，在data顯示的都會是string型別
• 我們在表單輸入框(input[type="number"])雖然限定了使用者只能在輸入框輸入數字，但透過v-model雙向綁定到vue data中的資料仍是string型別
• 當我們想要使用者只輸入數字型別，雙向綁定資料後到vue data也是數字型別時，就需要input[type="number"]，再來就是v-model.number=""這就可以將這裡的數字資料在雙向綁定vue data資料的同時，仍保持數字型別

v-model.trim=""

• 這修飾符可以幫我們把輸入的資料內容的最前與最後方出現的空白字符給消除，這個很適用在輸入email的表單
• 可以避免用戶在輸入email時誤輸入了空白符