PHP程序设计与微信小程序案例教程PPT课件（共21单元）7 制作“比较成绩”JS代码.pptxVIP

PHP程序设计 主讲人：谭丽君 2.6制作“比较成绩”js代码 2.6制作“比较成绩”js代码 1.bjcj.wxml文件中给输入框添加bindchange事件、按钮添加bindtap事件，给最后一个view组件内容数据绑定{{result}}。 input bindchange=yw /input button type=primary bindtap=bj比较成绩/button input bindchange=sx /input view比较结果{{result}}/view 2.6制作“比较成绩”js代码 Page({ data: { cj1:0, cj2:0, result:, }, 步骤1：在bjcj.js文件的Page中的data里 给页面变量赋初值 步骤2：在bjcj.js文件的Page中编写yw事件处理函数， yw:function(e){ this.setData({ cj1:Number(e.detail.value) }) }, e是触发事件的组件 e.detail.value是获取用户输入的值 this.setData是把e.detail.value的值赋值给cj1 2.6制作“比较成绩”js代码 步骤3：在bjcj.js文件的Page中编写sx事件处理函数， sx:function(e){ this.setData({ cj2:Number(e.detail.value) }) }, e是触发事件的组件 e.detail.value是获取用户输入的值 this.setData是把e.detail.value的值赋值给cj1 2.6制作“比较成绩”js代码 步骤4：在bjcj.js文件的Page中编写bj事件处理函数， bj:function(){ var str=成绩相等 if(this.data.cj1this.data.cj2){ str=语文成绩高 } if(this.data.cj1this.data.cj2){ str=数学成绩高 } this.setData({ result:str }) }, 如果cj1cj2 str的值为语文成绩高 如果cj1cj2 str的值为数学成绩高 用this.setData函数把str的值赋值给result 给str变量赋值 2.6制作“比较成绩”js代码 优化代码： 1.把2个输入框的绑定事件函数统一用fs 2.分别给2个输入框添加data-name input bindchange=fs data-name=cj1 /input button type=primary bindtap=bj比较成绩/button input bindchange=fs data-name=cj2 /input view比较结果{{result}}/view 2.6制作“比较成绩”js代码 优化代码： 在bjcj.js文件的Page中编写fs事件处理函数： fs:function(e){ console.log(e) this.data[e.target.dataset.name]=Number(e.detail.value) }, input bindchange=fs data-name=cj1 /input 删除yw和sx函数