Vue表單修飾符（lazy,number,trim）

lazy:使用了這個修飾符將會從“input事件”變成change事件進行同步

<div id="example">
    <input type="text" v-model.lazy="message">
    <p>{{ message }}</p>
</div>

new Vue({
   el:"#example",
   data:{
     message:""
   }
})

這樣輸入了數字並沒有顯示出來而是當移開光標后在觸發

 

number

首先誰明這個number並不是限制用戶的輸入,而是將用戶輸入的數據嘗試綁定為 js 中的 number 類型

舉個例子，如果用戶輸入300，data 中綁定的其實是'300'(string)，添加 number 指令后可以得到 300(number)的綁定結果。
而如果用戶輸入的不是數字，這個指令並不會產生任何效果。

上代碼：

1 <div id="example">
2     <input type="text" v-model.number="message">
3     <p>{{ message }}</p>
4     <button @click="assay()">獲取當前的類型</button>
5 </div>

 1 new Vue({
 2    el:"#example",
 3    data:{
 4      message:""
 5    },
 6    methods:{
 7      assay(){
 8        alert(typeof this.message);
 9      }
10    }
11 })

當不加number修飾符輸入123456..數字的時候顯示的類型為string

 

 而加了number修飾符就變成了number類型

 

 當你輸入的不是數字就不起作用了

 

 

trim可以用來過濾前后的空格

當使用了trim修飾符后

這樣就自動過濾用戶輸入的首尾空白字符