064 ∞ 实现数字键功能 | 【实战篇】
本帖最后由 不二如是 于 2018-7-18 10:52 编辑http://xxx.fishc.org/forum/201805/02/171248f4zdsipf6d4qjnjl.png
上一讲我们为每一个按钮绑定了一个id数据，本次实现按钮的具体功能。
现在单击按钮时，计算器界面没有任何比那话，我们需要为clickButton事件编写相应的代码。
clickButton需要处理20多个按钮的触发事件，因此需要通过识别不同的id，进行不同的处理操作。
先来简单定义一下业务。
1、在用户数按下数字按钮时，将在计算结果区（保存在result中），显示输入的数字，需要考虑一下几点：
1、初始化数据时，为数字按钮定义的id为num0-num9，因此，通过id判断，来定义用户按了哪个数字按钮，在将id分割取最后一位就能得到数字部分。
2、默认为0，新输入3，则用3替换掉0。
3、默认为其他数字，例如6，新输入4，则显示64，新输入数字添加到现有data后面。
4、每次按下一次数字，就要更新一下result，这样才能在计算结果区域显示最新的结果。
现在来编写代码，在calc.js的clickButton中添加代码：
// 获取结果
var data = this.data.result;
获取当前的显示结果，这样才能进行2，3，4。
然后判断是否按了数字键，通过e.target.id，测试一下：
console.log(e.target.id);
没问题，可以正确输出对应的id值，现在通过这个值判断是否为数字键：
// 判断是否按了数字键
if (e.target.id >= 'num0' && e.target.id <= 'num9'){
// 是数字键，执行相应功能
}
else{
// 不是数组键，执行相应的功能
}
在if中添加代码：
// 正常情况直接拼接
data += e.target.id.split("m");
// 如果默认为0，则用输入值替换
if(this.data.result == '0'){
data = e.target.id.split("m");
}
默认正常情况下直接拼接，如果为0，则用输入值替换。
split分割：
其他切割字符串的方法也可以，鱼油可以自行试一试～
如果不是数字键，我们就先输出当前id，在else中添加：
console.log(e.target.id);
现在更新结果值，利用setData方法：
this.setData({
result:data
})
编译：
输入数字键正确显示，输入其他则在控制台暂时输出id值。
课后作业
1、展示你的clickButton最终代码？
答案：
**** Hidden Message *****
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.org/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢小程序，请订阅 专辑（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.org/forum/201803/21/151715umqz1qoywp11wjbq.gif
页:
[1]