微信小程序实现一个简单的加减法的计算器

首先看一下效果图：

实现的功能及步骤：首先在wxml当中编辑好布局等。俩个input标签用于输入值。一个view用于给计算结果。
首先对于input标签要绑定好一个方法，也就是将输入的数字实时同步。在js文件当中编辑：绑定的俩个方法相同，对原本的num和num1赋值，需要注意的是，在这是的e.detail.value获取的值要进行数据类型强制转换。

handleInput(e) {this.setData({num:parseInt(e.detail.value)}) //console.log("触发")console.log(e.detail.value)//获取输入的值},handleInput1(e) {this.setData({num1: parseInt(e.detail.value)})//console.log("触发")console.log(e.detail.value)//获取输入的值},

再者就是绑定一个数据add到button标签上面，在button上有给出一个data-operation，对于加减法分别使用1和-1表示：（方便后面判断）与上述代码同理：

handletap(e) {this.setData({add: (e.target.dataset.operation), //获取绑定加号的operation值})console.log(e)},

最后就是在wxml当中获取变量值进行输出：给input和button分别绑定上述事件。最后使用wx:if对其进行输出结果。

<text>第一个数：</text>
<input type="text" bindinput="handleInput" ></input>
<button bindtap="handletap" data-operation="{{1}}">+</button><!--添加按钮 +点击事件 -->
<text>第二个数：</text>
<input type="text" bindinput="handleInput1" ></input>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view wx:if="{{add>0}}" >相加的结果：{{num+num1}}</view>
<view wx:else="{{add<0}}">相减的结果：{{num-num1}}</view>

微信小程序实现一个简单的加减法的计算器相关推荐

android商品数量加减,微信小程序实现一个简单的商品数量加减案例
简介这是一个用微信小程序原生代码实现的数量加减demo,主要是用于商品购物车或者商品详情修改数量使用,很简单哦~~~. 核心js方法说明addCount(增加数量) delCount (减少数量) ...
微信小程序开发一个简单的摇骰子游戏
页面代码 <view class='top'>{{txt}}</view> <view class='point1'><image src='{{one_im ...
微信小程序实现一个简单的倒计时效果
WXML代码: <view class='countDown'>倒计时:<text style='color:red'>{{countDownNum}}</text> ...
微信小程序实现一个简单的表格
wxml <view class="table"><view class="tr bg-w"><view class=" ...
微信小程序，一个有局限的类似 React Native 轮子
微信小程序就是一个类似RN的轮子,可以快速开发,有一定的适用场景,但是也有其局限性.(结论是基于微信小程序的示例代码做的解读,可能存在谬误. 文末有好奇心日报小程序的二维码,欢迎围观. 2016年11 ...
微信小程序，一个有局限的类似 React Native 轮子！
微信小程序就是一个类似RN的轮子,可以快速开发,有一定的适用场景,但是也有其局限性.(结论是基于微信小程序的示例代码做的解读,可能存在谬误. 文末有好奇心日报小程序的二维码,欢迎围观. 2016年11 ...
微信小程序实现一个文件管理器
微信小程序实现一个文件管理器虽然标题说是实现一个文件管理器,但我是用来管理预加载小程序可能用的网络资源的,尤其是要是用音效资源时. 小程序的包体即便是分包也是每个分包的资源大小是2m,像音频资源,使 ...
3元购买微信小程序解决方案一个月
3元购买微信小程序解决方案一个月参考文章: (1)3元购买微信小程序解决方案一个月 (2)https://www.cnblogs.com/wqcheng/p/7458808.html 备忘一下.
微信小程序开发一个小型商城（八、个人页面）
上一篇文章:微信小程序开发一个小型商城(七.支付页面) 在上方还是使用wx:if进行判断是否有登录的数据,有的话将数据当中的图片和名字渲染到页面当中,不存在的话使用一个登录按钮表示需要用户登录.往下分 ...

微信小程序实现一个简单的加减法的计算器

微信小程序实现一个简单的加减法的计算器相关推荐

最新文章

热门文章