【UniApp】-uni-app-处理项目输入数据(苹果计算器)

合集 - UniApp(23)

1.【UniApp】-uni-app概述2023-12-072.【UniApp】-uni-app全局样式和局部样式2023-12-073.【UniApp】-uni-app-全局数据和局部数据2023-12-084.【UniApp】-uni-app-内置组件2023-12-095.【UniApp】-uni-app-扩展组件2023-12-096.【UniApp】-uni-app-修改组件主题和样式2023-12-107.【UniApp】-uni-app-OptionAPI应用生命周期和页面生命周期2023-12-108.【UniApp】-uni-app-CompositionAPI应用生命周期和页面生命周期2023-12-119.【UniApp】-uni-app-路由2023-12-1610.【UniApp】-uni-app-传递数据2023-12-1611.【UniApp】-uni-app-CompositionAPI传递数据2023-12-1712.【UniApp】-uni-app-数据传递补充2023-12-1713.【UniApp】-uni-app-数据缓存2023-12-1714.【UniApp】-uni-app-pinia存储数据2023-12-1915.【UniApp】-uni-app-网络请求2023-12-2016.【UniApp】-uni-app-自定义组件2023-12-2117.【UniApp】-uni-app-项目实战页面布局(苹果计算器)2023-12-24

18.【UniApp】-uni-app-处理项目输入数据(苹果计算器)2023-12-24

19.【UniApp】-uni-app-动态计算字体大小(苹果计算器)2023-12-2520.【UniApp】-uni-app-项目计算功能(苹果计算器)2023-12-2621.【UniApp】-uni-app-打包成网页2023-12-2822.【UniApp】-uni-app-打包成小程序2023-12-2823.『UniApp』uni-app-打包成App2023-12-30

收起

前言

• 上一篇文章完成了项目的基本布局，这一篇文章我们来处理一下项目的输入数据
• 项目的输入数据主要是通过按键来输入的，所以我们需要对按键进行处理
• 那么我们就来看一下 uni-app-处理项目输入数据

步入正题

• 在上篇文章中，我在 data 中定义了一个 buttons
• 每个元素中，有一个 func 属性，这个属性就是告诉程序如果按下的话，需要执行什么操作，这里可以采用 switch 语句来进行处理

好，那么我们就来看一下具体的代码，在上一篇中，我给每一个元素都绑定了一个点击事件，接下来只需要在这个点击事件中进行处理就可以了，代码如下：

好，那么我们来看一下效果，点击运算符，控制台输出 计算操作，点击数字，控制台输出 输入操作，效果如下：

首先来处理输入操作，也就是处理输入操作，好了，废话不多说直接肝代码，完成 inputText 方法。

主要处理的逻辑分别为：

1. 如果输入的是 .，并且如果已经有了 .，那么就什么都不做

javascript

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

2. 判断当前输入内容长度是否超过 11, 如果超过了，就什么都不做

javascript

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

3. 如果输入的不是 .，并且如果当前输入内容是 0，那么就把当前输入内容替换为输入的内容
4. 如果是其它内容，那么就追加到当前输入内容的后面

javascript

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

5. 如果是整数，还需要添加位数符号，比如 1,000,000

javascript

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

好了理清楚大致的思路之后，接下来就是将思路转变为代码即可，最终代码如下：

inputText(params) {
    // console.log("输入操作");
    // 如果输入的是., 并且已经有., 那么什么都不做
    if (params == "." && this.showValue.indexOf(".") > -1) return;
    // 判断当前输入内容长度是否超过11, 超过11也什么都不做
    if (this.showValue.length >= 11) return;
    // 如果输入的不是., 并且当前没有数据, 那么就直接赋值
    if (params != "." && this.showValue == "0") {
        this.showValue = params + "";
    } else {
        // 如果是其它内容, 那么就追加
        this.showValue += params + "";
    }

    // 如果是整数, 还需要添加位数符号
    if (params != "." && this.showValue.indexOf(".") == -1) {
        let num = parseInt(this.showValue.replaceAll(",", ""));
        this.showValue = num.toLocaleString();
    }
}

这里最为关键的代码就是添加位数符号, 通过 replaceAll(",", "") 将 , 替换为空字符串, 然后通过 parseInt 将字符串转换为整数, 最后通过 toLocaleString 将整数转换为带有位数符号的字符串, 这样就完成了整数的位数符号添加。

运行测试效果：

End

• 如果你有任何问题或建议，欢迎在下方留言，我会尽快回复
• 如果你觉得本文对你有帮助，欢迎点赞、收藏，你的支持是我写作的最大动力

• 前言
• 步入正题
• End

__EOF__