一、 v-model.number 指令修飾符
使用v-model.number可以將輸入的數(shù)據(jù)轉(zhuǎn)換為Number類型。但是本質(zhì)上還是String類型
<el-input v-model.number="total"></el-input>
有三個(gè)問(wèn)題：
1.鍵盤(pán)先輸入數(shù)字時(shí)沒(méi)有問(wèn)題，數(shù)字后面不會(huì)有字符
2.如果先輸入的是字符再輸入數(shù)字則是拼接效果，字符不會(huì)被排除且可以輸入中文，如：ab123
3.以上兩種都不會(huì)排除e，如e123, 123e
總結(jié)：
v-model.number 只能滿足先輸入數(shù)字且不能排除e，所以需要結(jié)合其他方式一起使用
二、 type=“number”
需要結(jié)合css樣式，去掉input右邊的滾動(dòng)條文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-535352.html
<el-input v-model="total" type="number"></el-input>
// css
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
}
::v-deep input[type='number'] {
-moz-appearance: textfield !important;
}
三、在屬性中添加onkeyup或者oninput進(jìn)行正則判斷
<el-input
v-model="total"
οnkeyup="value=value.replace(/[^\d]/g,0)">
</el-input>
經(jīng)過(guò)測(cè)試，以上方式，在輸入了中文之后會(huì)出現(xiàn)取值不對(duì)的bug文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-535352.html
四、 利用表單prop的自定義校驗(yàn)方式
// 校驗(yàn)規(guī)則：正整數(shù)和0
export const validateNonnegative = () => (rule, value, callback) => {
if (/^([0]|[1-9][0-9]*)$/.test(value) === false) {
callback(new Error('請(qǐng)輸入一個(gè)正確的數(shù)值'));
} else {
callback();
}
};
到了這里，關(guān)于控制el-input只輸入數(shù)字的幾種方式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
