vue限制輸入數(shù)字或者保留兩位小數(shù)實現(xiàn)
正文
項目使用vant框架
vant 的安裝
項目中使用vant時,可以通過npm或yarn進行安裝。vue2和vue3安裝方法基本相同
npm i vant -S # 安裝最新版 npm i vant@latest-v2 -S # vue2項目,安裝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ù)點的數(shù)字鍵盤問題
<label>價格:</label> <input type="text" v-model.trim="price" inputmode="decimal" placeholder="請輸入價格" @keyup="handlePrice(price)"/>
vant使用方法
允許輸入數(shù)字,調(diào)起帶符號的純數(shù)字鍵盤
<van-field type="number" v-model.number="price" label="價格" placeholder="請輸入價格" @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, "."); //只保留第一個. 清除多余的 val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", "."); val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能輸入兩個小數(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ù)實現(xiàn)的詳細(xì)內(nèi)容,更多關(guān)于vue限制輸入的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
前端利用vue實現(xiàn)導(dǎo)入和導(dǎo)出功能詳細(xì)代碼
最近項目中讓實現(xiàn)一個導(dǎo)入導(dǎo)出Excel的功能,下面這篇文章主要給大家介紹了關(guān)于前端利用vue實現(xiàn)導(dǎo)入和導(dǎo)出功能的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09關(guān)于vue3默認(rèn)把所有onSomething當(dāng)作v-on事件綁定的思考
這篇文章主要介紹了關(guān)于vue3默認(rèn)把所有`onSomething`當(dāng)作`v-on`事件綁定的思考,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05詳解Vue組件插槽的使用以及調(diào)用組件內(nèi)的方法
在本篇文章里我們給大家分享了Vue組件插槽的使用以及調(diào)用組件內(nèi)的方法相關(guān)知識點,有需要的朋友們參考下。2018-11-11