v-model的三個修飾符

1、lazy

<input type="text" v-model="name">

相當於

<input type="text" :value="name" @input="(e)=>name=e.target.value">

加上lazy修飾符

<input type="text" v-model.lazy="name">

相當於（將input事件改為change事件）

<input type="text" :value="name" @change="(e)=>name=e.target.value">

change事件在輸入時不會改變data中的數據：

它是在失焦時才觸發更新

注意：el-input 和 van-field 的v-model加載lazy修飾符沒有作用

 

2、number（elementUI和vant只能輸入純數字，並且是數值型）

    <input type="number" v-model.number="age" />
    <p>{{age}} {{typeof age}}</p>

加上number修飾符后，如果輸入的是數字那么值類型就一直是數字，如果輸入的第一個字符是字符串那么值類型就為字符型了

和type='number'搭配使用，禁止數字外的字符輸入就可以一直是數字型

不過設置了type='number'后，輸入框會有兩個小箭頭

這看着多難受，有兩種解決辦法：

①可以使用 oninput="value=value.replace(/[^\d]/g,'')" 替代 type='number'

<input v-model.number="age" oninput="value=value.replace(/[^\d]/g,'')" />

　　這樣可以保證input中輸入的是數字型數字！但是不支持小數！

②使用type='number'，設置樣式

/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
/deep/ input[type='number'] {
  -moz-appearance: textfield;
}

　　這種情況支持小數！

 

elementUI的el-input加上type='number'也會有這個丑陋的箭頭：

設置樣式后箭頭就沒有了，也可以用下面的方式，只不過不支持小數了

el-input v-model.number="num" oninput="value=value.replace(/[^\d]/g,'')" />

如果寫成這樣 oninput="value=value.replace(/[^\d.]/g,'')" 那么可以輸入多個小數點，不符合要求

 

vant的van-field加上type='digit'或type='number'沒有丑陋的箭頭

以下這兩種方式效果一樣：

<van-field type="digit" v-model.number="num" label="數字" />

<van-field oninput="value=value.replace(/[^\d]/g,'')" v-model.number="num" label="數字" />

而type='number'支持小數

<van-field type="number" v-model.number="num" label="數字" />

 

總結：

　　1、給v-model添加number修飾符可以過濾掉數字以外的字符

　　2、但是在開頭處輸入其他字符就又變成string類型了

　　3、可以設置type='number'，禁止數字、小數點（有且只有一個小數點）、負號外的其他字符，但是這種方式會有小箭頭，可以通過設置樣式去掉這個小箭頭

　　4、如果不設置type='number'，可以設置oninput="value=value.replace(/[^\d]/g,'')"，這種方式只支持自然數

3、trim

去除首尾兩端的空格，同樣適用於elementUI和vant

    <input v-model.trim="name" />
    <p>開頭{{name}}結尾</p>

    <el-input v-model.trim="name" />

    <van-field v-model.trim="name" />