【案例1】比较数字大小

index.wxml
index.wxss
index.js

index.wxml

<!--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>

index.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: #FF6000;letter-spacing: 12rpx;
}

index.js

// 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}}的值}
})

实现效果

2.1微信小程序--比较数字大小相关推荐

《微信小程序-比较数字大小》
1.创建一个新的项目,点击菜单栏的项目->创建所有项目->点击"+"号->APPID如果已经注册并使用过直接点击测试号即可->选择不适用云服务->开发 ...
微信小程序——比较数字大小案例
文章目录案例链接页面效果讲解代码页面样式页面设计页面逻辑案例链接 https://download.csdn.net/download/weixin_45525272/16242285 ...
微信小程序:调取数字键盘，没有小数点的解决办法
通常来说:input框有type这个属性,我们通常使用text.number .checkbox等这些常用的type值来限制输入框的输入. 在微信小程序中,当我们的输入框的type值为number的时 ...
微信小程序超出代码大小限制，使用云开发调用文件+js动态调取（实例）
微信小程序代码上传大小有限制(可能是因为个人),但是提供了方便的云开发,有云数据库.数据存放.云函数,等功能.基础版还是免费的! 我在页面中需要调用13张图片,但是上传.预感.真机调试时都以" ...
android 支付数字键盘,微信小程序自定义数字键盘|仿支付宝、微信支付数字软键盘...
(此图片来源于网络,如有侵权,请联系删除! ) 前几天有开发过一个html5仿支付宝.微信支付数字键盘,在某些特定场景下自定义数字键盘应用还是蛮广泛的,比如小程序商城系统需要零钱支付 ,会员卡支付 ...
微信小程序分享图片大小处理
1.在分享的page 添加 canvas 标签 <canvas canvas-id="canvas"style="position: absolute; top: ...
微软收购暴雪计划遭拒/ Edge被曝泄露浏览记录/ 微信小程序可用数字人民币...今日更多新鲜事在此...
日报君发自凹非寺量子位 | 公众号 QbitAI 大家好,今天是4月27日星期四,是这个月倒数第二天上班了~ 在假期可以翘首以待的日子里,还是来和日报君看看今天的科技圈资讯吧~ 微信支持数字人民 ...
微信小程序的数字有部分会自动加粗的解决方法
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: bug图: 能看到,0和1是一个标签里面的,但是不统一显示此时的代码: <view>20 ...
微信小程序----MUI数字输入框
效果体验二维码如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! DEMO下载效果图 WXML <view class="tui-content&q ...

2.1微信小程序--比较数字大小

【案例1】比较数字大小

index.wxml

index.wxss

index.js

2.1微信小程序--比较数字大小相关推荐

最新文章

热门文章