前言

• 上一篇文章完成了項(xiàng)目的基本布局，這一篇文章我們來(lái)處理一下項(xiàng)目的輸入數(shù)據(jù)
• 項(xiàng)目的輸入數(shù)據(jù)主要是通過(guò)按鍵來(lái)輸入的，所以我們需要對(duì)按鍵進(jìn)行處理
• 那么我們就來(lái)看一下 uni-app-處理項(xiàng)目輸入數(shù)據(jù)

步入正題

• 在上篇文章中，我在 data 中定義了一個(gè) buttons
• 每個(gè)元素中，有一個(gè) func 屬性，這個(gè)屬性就是告訴程序如果按下的話，需要執(zhí)行什么操作，這里可以采用 switch 語(yǔ)句來(lái)進(jìn)行處理

好，那么我們就來(lái)看一下具體的代碼，在上一篇中，我給每一個(gè)元素都綁定了一個(gè)點(diǎn)擊事件，接下來(lái)只需要在這個(gè)點(diǎn)擊事件中進(jìn)行處理就可以了，代碼如下：

<script>
	export default {
		methods: {
			operate(item) {
				const func = item.func;
				const params = item.params;

				switch (func) {
					case "operator":
						this.operator(params);
						break;
					case "inputText":
						this.inputText(params);
						break;
				}
			},
			operator(params) {
				console.log("計(jì)算操作");
			},
			inputText(params) {
				console.log("輸入操作");
			}
		}
	}
</script>

好，那么我們來(lái)看一下效果，點(diǎn)擊運(yùn)算符，控制臺(tái)輸出 計(jì)算操作，點(diǎn)擊數(shù)字，控制臺(tái)輸出 輸入操作，效果如下：

首先來(lái)處理輸入操作，也就是處理輸入操作，好了，廢話不多說(shuō)直接肝代碼，完成 inputText 方法。

主要處理的邏輯分別為：

1. 如果輸入的是 .，并且如果已經(jīng)有了 .，那么就什么都不做

if (params == "." && this.showValue.indexOf(".") > -1) return;

2. 判斷當(dāng)前輸入內(nèi)容長(zhǎng)度是否超過(guò) 11, 如果超過(guò)了，就什么都不做

if (this.showValue.length >= 11) return;

3. 如果輸入的不是 .，并且如果當(dāng)前輸入內(nèi)容是 0，那么就把當(dāng)前輸入內(nèi)容替換為輸入的內(nèi)容
4. 如果是其它內(nèi)容，那么就追加到當(dāng)前輸入內(nèi)容的后面

if (params != "." && this.showValue == "0") {
    this.showValue = params + "";
} else {
    // 如果是其它內(nèi)容, 那么就追加
    this.showValue += params + "";
}

5. 如果是整數(shù)，還需要添加位數(shù)符號(hào)，比如 1,000,000

if (params != "." && this.showValue.indexOf(".") == -1) {
    let num = parseInt(this.showValue.replaceAll(",", ""));
    this.showValue = num.toLocaleString();
}

好了理清楚大致的思路之后，接下來(lái)就是將思路轉(zhuǎn)變?yōu)榇a即可，最終代碼如下：

inputText(params) {
    // console.log("輸入操作");
    // 如果輸入的是., 并且已經(jīng)有., 那么什么都不做
    if (params == "." && this.showValue.indexOf(".") > -1) return;
    // 判斷當(dāng)前輸入內(nèi)容長(zhǎng)度是否超過(guò)11, 超過(guò)11也什么都不做
    if (this.showValue.length >= 11) return;
    // 如果輸入的不是., 并且當(dāng)前沒(méi)有數(shù)據(jù), 那么就直接賦值
    if (params != "." && this.showValue == "0") {
        this.showValue = params + "";
    } else {
        // 如果是其它內(nèi)容, 那么就追加
        this.showValue += params + "";
    }

    // 如果是整數(shù), 還需要添加位數(shù)符號(hào)
    if (params != "." && this.showValue.indexOf(".") == -1) {
        let num = parseInt(this.showValue.replaceAll(",", ""));
        this.showValue = num.toLocaleString();
    }
}

這里最為關(guān)鍵的代碼就是添加位數(shù)符號(hào), 通過(guò) replaceAll(",", "") 將 , 替換為空字符串, 然后通過(guò) parseInt 將字符串轉(zhuǎn)換為整數(shù), 最后通過(guò) toLocaleString 將整數(shù)轉(zhuǎn)換為帶有位數(shù)符號(hào)的字符串, 這樣就完成了整數(shù)的位數(shù)符號(hào)添加。

運(yùn)行測(cè)試效果：

End

• 如果你有任何問(wèn)題或建議，歡迎在下方留言，我會(huì)盡快回復(fù)
• 如果你覺(jué)得本文對(duì)你有幫助，歡迎點(diǎn)贊、收藏，你的支持是我寫(xiě)作的最大動(dòng)力

總結(jié)

以上是生活随笔為你收集整理的【UniApp】-uni-app-处理项目输入数据(苹果计算器)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。