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

文章目录

案例链接

https://download.csdn.net/download/weixin_45525272/16242285

页面效果

讲解

代码

页面样式

/* 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;
}

页面设计

<!--pages/index/index.wxml-->
<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}}的值
  }
})