效果图
wxml代码
<!--index.wxml-->
<view class="demo-box">
<text class="title">请输入第一个数字：</text>
<input type="number" bindchange='num1change'/>
</view>
<view class="demo-box">
<text class="title">请输入第二个数字：</text>
<input type="number" bindchange='num2change'/>
</view>
<button bindtap='compare'>比较大小</button>
<view class="demo-box">
<text class="title">比较结果为：{{result}}</text>
</view>wxss代码
/**index.wxss**/
.demo-box{
margin: 50rpx;
}
input{
width: 600rpx;
margin-top: 20rpx;
border-bottom: 4rpx solid #cccc;
}
button{
margin: 50rpx;
}
button{
color: aliceblue;
background-color: #369;
letter-spacing: 12rpx;
}
index.js代码
Page({
data: {
result:''
},
num1:0,//保存一个数字
num2:0,
num1change:function(e){
this.num1 = Number(e.detail.value)
console.log("第一个数为："+this.num1)
},
num2change:function(e){
this.num2 = Number(e.detail.value)
console.log("第二个数为"+this.num2)
},
compare:function(e){
var str='俩数相等'
if(this.num1 > this.num2){
str = '第一个数大大大大'
}else if (this.num1<this.num2){
str = '第二个数大大大'
}
this.setData({result:str})
},
})
总结
