[小程序]两数比较(5种写法)

下面统一wxss格式是：

/* 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: #369;
  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}}的值
  }
})

第二种方法

<!--pages/index2/index1.wxml-->
<view>
  <text>请输入第1个数字：</text>
  <input id="num1" type="number" bindchange="change" />
</view>
<view>
  <text>请输入第2个数字：</text>
  <input id="num2" type="number" bindchange="change" />
</view>
<button bindtap="compare">比较</button>
<view>
  <text>比较结果：{{result}}</text>
</view>

// pages/index2/index1.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    result: ''
  },

  num1: 0, // 保存第1个数字
  num2: 0, // 保存第2个数字

  change: function (e) {
    this[e.currentTarget.id] = Number(e.detail.value)
  },

  compare: function (e) {
    var str = '两数相等'
    if (this.num1 > this.num2) {
      str = '第1个数大'
    } else if (this.num1 < this.num2) {
      str = '第2个数大'
    }
    this.setData({
      result: str
    })
  }
})

或者wxml是data-id="num2"表示形式

<!--pages/index2/index2.wxml-->
<view>
  <text>请输入第1个数字：</text>
  <input type="number" bindchange="change2" data-id="num1" />
</view>
<view>
  <text>请输入第2个数字：</text>
  <input type="number" bindchange="change2" data-id="num2" />
</view>
<button bindtap="compare">比较</button>
<view>
  <text>比较结果：{{result}}</text>
</view>

// pages/index2/index2.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    result: ''
  },

  num1: 0, // 保存第1个数字
  num2: 0, // 保存第2个数字

  change2: function (e) {
    this[e.target.dataset.id] = Number(e.detail.value)
  },

  compare: function (e) {
    var str = '两数相等'
    if (this.num1 > this.num2) {
      str = '第1个数大'
    } else if (this.num1 < this.num2) {
      str = '第2个数大'
    }
    this.setData({
      result: str
    })
  }
})

第三种方法

<!--pages/index3/index.wxml-->
<view>
  <text>请输入第1个数字：</text>
  <input type="number" bindchange="change3" data-id="num1" />
</view>
<view>
  <text>请输入第2个数字：</text>
  <input type="number" bindchange="change3" data-id="num2" />
</view>
<view>
  <text>比较结果：{{num1 > num2 ? '第1个数大' : (num1 < num2 ? '第2个数大' : '两数相等')}}</text>
</view>

// pages/index3/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    num1: 0,	// 在data中新增num1
    num2: 0, 	// 在data中新增num2
    result: ''
  },

  change3: function(e) {
    var data = {}
    data[e.target.dataset.id] = Number(e.detail.value)
    this.setData(data)
  }
})

第四种方法

<!--pages/index4/index.wxml-->
<view>
  <text>请输入第1个数字：</text>
  <input type="number" bindchange="change3" data-id="num1" />
</view>
<view>
  <text>请输入第2个数字：</text>
  <input type="number" bindchange="change3" data-id="num2" />
</view>
<view>
  <text wx:if="{{num1 > num2}}">比较结果：第1个数大</text>
  <text wx:if="{{num1 < num2}}">比较结果：第2个数大</text>
  <text wx:if="{{num1 == num2}}">比较结果：两数相等</text>
</view>
<view>
  <text wx:if="{{num1 > num2}}">比较结果：第1个数大</text>
  <text wx:elif="{{num1 < num2}}">比较结果：第2个数大</text>
  <text wx:else>比较结果：两数相等</text>
</view>
<view>
  <block wx:if="{{num1 > num2}}">
    <text>比较结果：第1个数大</text>
  </block>
  <block wx:elif="{{num1 < num2}}">
    <text>比较结果：第2个数大</text>
  </block>
  <block wx:else>
    <text>比较结果：两数相等</text>
  </block>
</view>

// pages/index4/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    num1: 0,	// 在data中新增num1
    num2: 0, 	// 在data中新增num2
    result: ''
  },

  change3: function (e) {
    var data = {}
    data[e.target.dataset.id] = Number(e.detail.value)
    this.setData(data)
  }
})

第五种方法

<!--pages/index5/index.wxml-->
<form bindsubmit="formCompare">
  <view>
    <text>请输入第1个数字：</text>
    <input type="number" name="num1" />
  </view>
  <view>
    <text>请输入第2个数字：</text>
    <input type="number" name="num2" />
  </view>
  <button form-type="submit">比较</button>
</form>
<view>
  <text>比较结果：{{result}}</text>
</view>

// pages/index5/index.js
Page({
  formCompare: function (e) {
    var str = '两数相等'
    var num1 = Number(e.detail.value.num1)
    var num2 = Number(e.detail.value.num2)
    if (num1 > num2) {
      str = '第1个数大'
    } else if (num1 < num2) {
      str = '第2个数大'
    }
    this.setData({ result: str })
  }
})