目錄正文vant 的安裝兩種方法原生方法使用vant使用方法正文

項(xiàng)目使用vant框架

vant 的安裝

項(xiàng)目中使用vant時(shí),可以通過npm或yarn進(jìn)行安裝。vue2和vue3安裝方法基本相同

npm i vant -S # 安裝最新版npm i vant@latest-v2 -S # vue2項(xiàng)目，安裝vant2

通過CDN安裝 樣式文件、js文件

<link rel='stylesheet' rel='external nofollow' /><script src='https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js'></script>

或者

<script src='https://staticweb.keepcdn.com/fecommon/package/vant@2.8.7/vant/vant.min.js'></script><link rel='stylesheet' rel='external nofollow' >兩種方法原生方法使用

加上inputmode屬性解決ios端調(diào)起帶小數(shù)點(diǎn)的數(shù)字鍵盤問題

<label>價(jià)格：</label><input type='text' v-model.trim='price' inputmode='decimal' placeholder='請(qǐng)輸入價(jià)格' @keyup='handlePrice(price)'/>vant使用方法

允許輸入數(shù)字，調(diào)起帶符號(hào)的純數(shù)字鍵盤

<van-field type='number' v-model.number='price' label='價(jià)格' placeholder='請(qǐng)輸入價(jià)格' @keyup='handlePrice(price)'/>

限制保留兩位小數(shù)方法

handlePrice(val){if (val !== '' && val.substr(0, 1) === '.') { val = '';}val = val.replace(/^0*(0\.|[1-9])/, '$1');//解決 粘貼不生效val = val.replace(/[^\d.]/g, ''); //清除“數(shù)字”和“.”以外的字符val = val.replace(/\.{2,}/g, '.'); //只保留第一個(gè). 清除多余的val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能輸入兩個(gè)小數(shù)if (val.indexOf('.') < 0 && val !== '') { if (val.substr(0, 1) === '0' && val.length === 2) {val = val.substr(1, val.length); }}this.priceAll = this.priceOne = val; },

以上就是vue限制輸入數(shù)字或者保留兩位小數(shù)實(shí)現(xiàn)的詳細(xì)內(nèi)容，更多關(guān)于vue限制輸入的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！