vue限制輸入數(shù)字或者保留兩位小數(shù)實現(xiàn)
更新時間：2023年07月10日 10:31:15 作者：淚滴在琴上
這篇文章主要為大家介紹了vue限制輸入數(shù)字或者保留兩位小數(shù)實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
正文
項目使用vant框架
vant 的安裝
項目中使用vant時,可以通過npm或yarn進(jìn)行安裝。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-cli配置flexible過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07
解決vue組件銷毀之后計時器繼續(xù)執(zhí)行的問題
這篇文章主要介紹了解決vue組件銷毀之后計時器繼續(xù)執(zhí)行的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本文主要實現(xiàn)給項目的整個背景加上自定義水印，可以改變水印的文案和字體顏色等，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
vue-router實現(xiàn)編程式導(dǎo)航的代碼實例
今天小編就為大家分享一篇關(guān)于vue-router實現(xiàn)編程式導(dǎo)航的代碼實例，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
基于Vue+.NET全面實現(xiàn)WebSocket聊天室
這篇文章主要為大家詳細(xì)介紹了如何基于Vue+.NET全面實現(xiàn)WebSocket聊天室,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-08-08
隨著前端技術(shù)的發(fā)展,CSS?變量（也稱為?CSS?定制屬性）成為了現(xiàn)代?Web?開發(fā)中不可或缺的一部分,在?Vue.js?應(yīng)用程序中,使用?CSS?變量不僅可以增強樣式的靈活性,還能提高開發(fā)效率,本文將詳細(xì)介紹如何在?Vue?項目中引入并使用?CSS?變量,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了vue3 teleport的使用demo,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-11-11
我們在做項目經(jīng)常會遇到多級導(dǎo)航這個需求,所以下面這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)四級導(dǎo)航及驗證碼的相關(guān)資料,文章通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-07-07
Vue ECharts直角坐標(biāo)系配置詳細(xì)講解
數(shù)據(jù)的重要性我們大家都知道，就算再小的項目中都可能使用幾個圖表展示，我最近在做項目的過程中也是需要用到圖表，最后選擇了echarts圖表庫2022-12-12
這篇文章主要為大家詳細(xì)介紹了vue2.0實現(xiàn)導(dǎo)航菜單切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05