微信小程序——比较数字大小案例

冷不防 2022-11-14 13:29 352阅读 0赞

### 文章目录 ###

*   *  案例链接
     *  页面效果
     *  讲解
     *  代码
     *   *  页面样式
         *  页面设计
         *  页面逻辑

## 案例链接 ##

[https://download.csdn.net/download/weixin\_45525272/16242285][https_download.csdn.net_download_weixin_45525272_16242285]

## 页面效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70]

## 讲解 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70 1]

## 代码 ##

### 页面样式 ###

/* pages/index/index.wxss */
    
    view { 
      margin: 50rpx;
    }
    
    input { 
      width: 600rpx;
      margin-top: 20rpx;
      border-bottom: 2rpx solid #ccc;
    }
    
    button { 
      margin: 50rpx;
    }
    
    button { 
      color: #fff;
      background: #FF6000;
      letter-spacing: 12rpx;
    }

### 页面设计 ###

<view>
      <text>请输入第1个数字：</text>
      <input type="number" bindchange="num1change" />
    </view>
    <view>
      <text>请输入第2个数字：</text>
      <input type="number" bindchange="num2change" />
    </view>
    <button bindtap="compare">比较</button>
    <view>
      <text>比较结果：{
       {result}}</text>
    </view>

### 页面逻辑 ###

// pages/index/index.js
    Page({ 
    
      /** * 页面的初始数据 */
      data: { 
        result: ''
      },
    
      num1: 0, // 保存第1个数字
      num2: 0, // 保存第2个数字
    
      num1change: function(e) { 
        this.num1 = Number(e.detail.value)
        console.log('第1个数字为' + this.num1)
      },
    
      num2change: function(e) { 
        this.num2 = Number(e.detail.value)
        console.log('第2个数字为' + this.num2)
      },
    
      compare: function(e) { 
        var str = '两数相等'
        if (this.num1 > this.num2) { 
          str = '第1个数大'
        } else if (this.num1 < this.num2) { 
          str = '第2个数大'
        }
        this.setData({ 
          result: str
        })
        // this.data.result = str // 这种方式无法改变页面中的{ {result}}的值
      }
    })

[https_download.csdn.net_download_weixin_45525272_16242285]: https://download.csdn.net/download/weixin_45525272/16242285
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70]: /images/20221022/e178222c3c7245f99c28b49422aef88b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70 1]: /images/20221022/083828f62b3e489bb544068104e250f4.png