《PHP程序设计与微信小程序案例教程》 课件2.6制作“比较成绩”js代码

主讲人：谭丽君2.6制作“比较成绩”js代码微信小程序开发

2.6制作“比较成绩”js代码

1.bjcj.wxml文件中给输入框添加bindchange事件、按钮添加bindtap事件，给最后一个view组件内容数据绑定{{result}}。框框按钮框文本输入框文本输入框文本2

<inputbindchange="yw"></input>13

<buttontype="primary"bindtap="bj">比较成绩</button>

<inputbindchange="sx"></input>

<view>比较结果{{result}}</view>34

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(){varstr="成绩相等"if(this.data.cj1>this.data.cj2){str="语文成绩高"}if(this.data.cj1<this.data.cj2){str="数学成绩高"}this.setData({result:str})},如果cj1>cj2str的值为语文成绩高如果cj1<cj2str的值为数学成绩高用this.setData函数把str的值赋值给result给str变量赋值

2.6制作“比较成绩”js代码

优化代码：1.把2个输入框的绑定事件函数统一用fs2.分别给2个输入框添加data-name框框按钮框文本输入框文本输入框文本2

<inputbindchange="fs"data-name="cj1"></input>13

<buttontype="primary"bindtap="bj">比较成绩</button>

<inputbindchange="fs"data-name="cj2"></input>

<view>比较结果{{result}}</view>34

2.6制作“比较成绩”js代码

优化代码：在bjcj.js文件的Page中编写fs事件处理函数：fs:function(e){console.log(e)this.data[]=Number(e.deta