[移动开发]?两个数的比较运算---微信小程序?

wxml文件

<!-- view里面也可以写文字，自带有换行符
text里面没有换行符，添加换行符可以起换行作用
 -->
 <view class="myname">
<text>我的名字叫×××</text>
</view>
 <form action="" bindsubmit="formCompare">
<view>
<text>请输入第一个数字</text>
<!-- 数字文本框，当点击文本框时会自动弹出数字键盘 -->
<!-- input为单边标签以“/”结尾，既可以写成单边也可以写成双边 -->
<input name="num1" type="number" />
</view>
<view>
<text>请输入第二个数字</text>
<input name="num2"  type="number" />
</view>
<button form-type="submit">比较</button>
</form>
<view>

<!-- 数据绑定 -->
<text>比较结果：{{result}}</text>
</view>

js文件

  data: {
      // 保存第一个数字
num1:0,
// 保存第二个数字
num2:0,
result:""
  },
formCompare:function(e){
  var str="两数相等"
  var num1=Number(e.detail.value.num1)
  var num2=Number(e.detail.value.num2)
  if(num1>num2){
    str="第一个数大"
  }else if(num2>num1){
    str="第二个数大"
  }
// 赋值，需要通过setData赋值，通过setData修改result值
 this.setData({
   result:str
 })
},

wxss文件

view {
  /* 40rpx=20px */
  margin: 40rpx;
}
input {
  border: 2rpx solid black;
}
.myname{
  text-align: center;
  font-size: 50rpx;
color: cadetblue;
}

index.json文件

{
"enablePullDownRefresh": true,
"onReachBottomDistance": 10
}

app.json文件

{
  "pages": [
    "pages/index/index",
  ],
  "sitemapLocation": "sitemap.json",
  "window": {
    "navigationBarTitleText": "两个数比较运算",
    "navigationBarBackgroundColor": "#369"
  }
}

app.wxss文件

button {
  /* 增加文字之间的距离 */
  letter-spacing: 12rpx;
  margin: 40rpx;
  background-color: #2C6299;
}