表白:人说红颜薄命,你做我的红颜,我愿为你薄命。
讲解对象:小程序 事件绑定
作者:融水公子 rsgz
我们假设一个需求,一个计算器。上面有输入框,输入什么下面显示什么。右边有加减号按钮,点击一次分别加减1.app.json文件新加
函数原型:"pages/demo01/demo01"
页面的js文件添加data: {
num:0
},
handleInput(e){
console.log("开心");
},
wxml文件添加<input type="text" bindinput="handleInput"/>
输入数据:控制台会这样显示 开心执行了18次
<view>
{{num}}
</view>
第一次改进handleInput(e){
console.log(e);
},当我输入100.事件源对象的value值也是改成了100
继续改进handleInput(e){
输入100,控制台会这样显示
console.log(e.detail.value);
},
继续改进:输入框的值赋值给输出框handleInput(e){
输出结果:输入输出框的值都是同步的
// console.log(e.detail.value);
this.setData({
num:e.detail.value
})
},当然了在控制台的AppData里面也是有显示的
添加加减号按钮并且绑定事件 JS文件编辑
data: {
num:0
},
handleInput(e){
// console.log(e.detail.value);
this.setData({
num:e.detail.value
})
},
handletap(e){
const operation=e.currentTarget.dataset.operation;
this.setData({
num:this.data.num + operation
})
},
wxml文件编辑<input type="text" bindinput="handleInput"/>
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>
{{num}}
</view>
1 通过num:this.data.num获取值
2 通过this.setData({
num:this.data.num + operation
})
进行设置值
3 绑定事件的时候不能直接传参,我们通过自定义一个属性传参
谢谢大家的支持!可以点击我的头像,进入我的空间浏览更多文章呢。建议大家360doc[www.360doc.com]注册一个账号登录,里面真的有很多优秀的文章,欢迎大家的到来。
---
联系客服