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í),可以通過(guò)npm或yarn進(jìn)行安裝。vue2和vue3安裝方法基本相同

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

通過(guò)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ù)字鍵盤(pán)問(wèn)題

<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ù)字鍵盤(pán)

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