vue限制輸入數(shù)字或者保留兩位小數(shù)實(shí)現(xiàn)
更新時(shí)間：2023年07月10日 10:31:15 作者：淚滴在琴上
這篇文章主要為大家介紹了vue限制輸入數(shù)字或者保留兩位小數(shù)實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
正文
項(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)注腳本之家其它相關(guān)文章！
相關(guān)文章
下面小編就為大家分享一篇vue-cli腳手架引入圖片的幾種方法總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
基于vue中對(duì)鼠標(biāo)劃過事件的處理方式詳解
今天小編就為大家分享一篇基于vue中對(duì)鼠標(biāo)劃過事件的處理方式詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue單文件組件無法獲取$refs的問題,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
前端利用vue實(shí)現(xiàn)導(dǎo)入和導(dǎo)出功能詳細(xì)代碼
最近項(xiàng)目中讓實(shí)現(xiàn)一個(gè)導(dǎo)入導(dǎo)出Excel的功能,下面這篇文章主要給大家介紹了關(guān)于前端利用vue實(shí)現(xiàn)導(dǎo)入和導(dǎo)出功能的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
Vue.js的組件的使用有3個(gè)步驟：創(chuàng)建組件構(gòu)造器、注冊(cè)組件和使用組件。這篇文章主要介紹了vue 注冊(cè)組件的使用,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-05-05
簡(jiǎn)單實(shí)現(xiàn)vue驗(yàn)證碼60秒倒計(jì)時(shí)功能
這篇文章主要為大家介紹了如何簡(jiǎn)單實(shí)現(xiàn)vue驗(yàn)證碼60秒倒計(jì)時(shí)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
關(guān)于vue3默認(rèn)把所有onSomething當(dāng)作v-on事件綁定的思考
這篇文章主要介紹了關(guān)于vue3默認(rèn)把所有`onSomething`當(dāng)作`v-on`事件綁定的思考,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
VUE項(xiàng)目中調(diào)用高德地圖的全流程講解
這篇文章主要介紹了VUE項(xiàng)目中調(diào)用高德地圖的全流程講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
SQLite 是一種輕量級(jí)的關(guān)系型數(shù)據(jù)庫(kù)管理系統(tǒng),以其簡(jiǎn)單易用、無需服務(wù)器等特點(diǎn)廣泛應(yīng)用于嵌入式系統(tǒng)、移動(dòng)應(yīng)用和小型應(yīng)用程序中,在 Vue.js 項(xiàng)目中使用 SQLite,可以將應(yīng)用的數(shù)據(jù)存儲(chǔ)在客戶端,本文將介紹如何在 Vue 項(xiàng)目中集成 SQLite,需要的朋友可以參考下2024-11-11
詳解Vue組件插槽的使用以及調(diào)用組件內(nèi)的方法
在本篇文章里我們給大家分享了Vue組件插槽的使用以及調(diào)用組件內(nèi)的方法相關(guān)知識(shí)點(diǎn)，有需要的朋友們參考下。2018-11-11