案例链接
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}}的值 } })