vue限制輸入數字或者保留兩位小數實現

目錄 正文 vant 的安裝 兩種方法 原生方法使用 vant使用方法 正文 項目使用vant框架 vant 的安裝 項目中使用vant時,可以通過npm或yarn進行安裝。vue2和vue3安裝方法基本相同 npm i vant -S # 安裝最

目錄

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

正文

項目使用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端調起帶小數點的數字鍵盤問題

<label>價格：</label>
<input type="text" v-model.trim="price" inputmode="decimal" placeholder="請輸入價格" @keyup="handlePrice(price)"/>

vant使用方法

允許輸入數字，調起帶符號的純數字鍵盤

<van-field type="number" v-model.number="price" label="價格" placeholder="請輸入價格" @keyup="handlePrice(price)"/>

限制保留兩位小數方法

handlePrice(val){
                if (val !== '' && val.substr(0, 1) === '.') {
                    val = "";
                }
                val = val.replace(/^0*(0\.|[1-9])/, '$1');//解決 粘貼不生效
                val = val.replace(/[^\d.]/g, "");  //清除“數字”和“.”以外的字符
                val = val.replace(/\.{2,}/g, "."); //只保留第一個. 清除多余的
                val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
                val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能輸入兩個小數
                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限制輸入數字或者保留兩位小數實現的詳細內容，更多關于vue限制輸入的資料請關注技圈網其它相關文章！

【感謝龍石為本站提供數據治理平臺技術支撐 http://www.longshidata.com/pages/government.html】