vue 輸入框輸入任意內(nèi)容返回?cái)?shù)字的實(shí)現(xiàn)
更新時(shí)間：2022年03月30日 15:26:55 作者：前端醬紫
本文主要介紹了vue 輸入框輸入任意內(nèi)容返回?cái)?shù)字的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
本文主要介紹了vue 輸入框輸入任意內(nèi)容返回?cái)?shù)字，具體如下：
輸入任意內(nèi)容只返回?cái)?shù)字
// 提取數(shù)字 傳入數(shù)字
export function changeEvent(item) {
let nums = item + "";
if (nums === "") {
nums = ""; // 空的話 直接返回空
} else {
nums = nums.replace(/[^\d|\.]/g, ""); // 提取出來 一定是數(shù)字
if (nums.includes(".")) {
// 包含小數(shù)點(diǎn)
let strL = nums.substring(0, nums.indexOf("."));
let strR = nums.substring(nums.indexOf(".") + 1);
nums = strL + "." + strR;
}
// else {
// // 不包含小數(shù)點(diǎn)
// nums = nums.replace(/[^\d|\.]/g, ""); // 提取出來 一定是數(shù)字
// }
}
return nums;
}
// 離開輸入事件
export function blurEvent(x, y) {
if (x === "") {
y.manualScore = "";
} else {
x = x + "";
let nums;
if (x.includes(".")) {
// 包含小數(shù)點(diǎn)
nums = x.replace(/[^\d|\.]/g, ""); // 提取出來 一定是數(shù)字
let strL = nums.substring(0, nums.indexOf("."));
let strR = nums.substring(nums.indexOf(".") + 1);
strR = strR.replace(/\./gi, ""); // 去除多余小數(shù)點(diǎn)
if (strL === "" && strR === "") {
nums = "0"; // 有小數(shù)點(diǎn)，但左側(cè)右側(cè)都為空 默認(rèn)為0
} else if (strL === "" && strR !== "") {
// 左側(cè)為空 右側(cè)不為空 小數(shù)
nums = "0." + strR;
} else if (strL !== "" && strR === "") {
// 右側(cè)為空 左側(cè)不為空 整數(shù)
nums = strL;
} else if (strL !== "" && strR !== "") {
nums = strL + "." + strR;
}
} else {
nums = x.replace(/[^\d|\.]/g, ""); // 提取出來 一定是數(shù)字
}
let z = nums * 1 || "";
z = z < 0 ? 0 : z;
y.manualScore = z;
}
console.log("x", x, "y:", y);
}
到此這篇關(guān)于vue 輸入框輸入任意內(nèi)容返回?cái)?shù)字的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue 輸入框輸入返回?cái)?shù)字內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在new Vue的配置參數(shù)中的computed和methods都可以處理大量的邏輯代碼，但是什么時(shí)候用哪個(gè)屬性，要好好區(qū)分一下才能做到正確的運(yùn)用vue。這篇文章主要介紹了Vue中method與computed的區(qū)別,需要的朋友可以參考下2018-03-03
vue開發(fā)移動(dòng)端底部導(dǎo)航條功能
這篇文章主要介紹了vue開發(fā)移動(dòng)端底部導(dǎo)航條功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了uniapp和vue的區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-10-10
vue+vue-meta-info動(dòng)態(tài)設(shè)置meta標(biāo)簽教程
這篇文章主要介紹了vue+vue-meta-info動(dòng)態(tài)設(shè)置meta標(biāo)簽教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue實(shí)現(xiàn)iview表格添加篩選功能的示例代碼
本文主要介紹了vue實(shí)現(xiàn)iview表格添加篩選功能的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
vue3.0如何使用computed來獲取vuex里數(shù)據(jù)
這篇文章主要介紹了vue3.0如何使用computed來獲取vuex里數(shù)據(jù)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue3輸入單號(hào)和張數(shù)如何自動(dòng)生成連號(hào)的單號(hào)
最近遇到這樣的需求輸入連號(hào)事件,需要在表格中輸入物流單號(hào),物流號(hào)碼,生成的數(shù)量,名稱,點(diǎn)擊確定自動(dòng)生成固定數(shù)量的連號(hào)物流單號(hào),本文重點(diǎn)介紹vue3輸入單號(hào)和張數(shù),自動(dòng)生成連號(hào)的單號(hào),感興趣的朋友一起看看吧2024-02-02
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)聊天框發(fā)送表情，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了Vue js生命周期，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
最近項(xiàng)目中使用了minio作為靜態(tài)資源管理服務(wù),所以簡(jiǎn)單寫一下如何通過minio來上傳圖片,下面這篇文章主要給大家介紹了關(guān)于Vue中通過minio上傳文件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07