Wechat applet - a case of comparing the size of numbers

Page effects

Page style

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

Page design

<!--index.wxml-->
<view>
  <text> Please enter the first 1 A digital ：</text>
  <input type="number" bindchange="num1change" />
</view>
<view>
  <text> Please enter the first 2 A digital ：</text>
  <input type="number" bindchange="num2change" />
</view>
<button bindtap="compare"> Compare </button>
<view>
  <text> Comparison results ：{
   {result}}</text>
</view>

Page logic

// index.js
//  Get application instance 
const app = getApp()

Page({

  /**
   *  Initial data of the page 
   */
  data: {
    result: ''
  },

  num1: 0, //  Save the first 1 A digital 
  num2: 0, //  Save the first 2 A digital 

  num1change: function(e) {
    this.num1 = Number(e.detail.value)//e.detail.value Get the value entered by the user ,Number() Transfer string to numeric type 
    console.log(' The first 1 Numbers are ' + this.num1)
  },

  num2change: function(e) {
    this.num2 = Number(e.detail.value)
    console.log(' The first 2 Numbers are ' + this.num2)
  },

  compare: function(e) {
    var str = ' Two numbers are equal '
    if (this.num1 > this.num2) {
      str = ' The first 1 It's a big number '
    } else if (this.num1 < this.num2) {
      str = ' The first 2 It's a big number '
    }
    this.setData({
      result: str
    })
    // this.data.result = str //  This method does not change the... In the page {
   {result}} Value 
  }
})