小程序的事件绑定

小程序的事件绑定

注意：

1. 需要给input标签绑定 input事件 绑定关键字 bindinput
2. 把输入框的值 赋值到 data当中不能直接
   this.data.num=e.detail.value
   或 this.num=e.detail.value
   正确的写法
   this.setData({
   num:获取的数值
   })
3. 绑定一个点击事件bindtap=“方法名”//注：这里不叫（）
4. 不可以在小程序中直接传值，通过如下：data-operation="{{1}}"

效果描述：数据双向绑定和数据增加/减少操作

.wxxml文件

<text style="font-size:30px">数据绑定</text>
<input type="text" style=" border-style: solid;border-width: 1px; width:200px" bindinput="myInput"/>
<button bindtap="clickNum" data-operation="{{1}}">+</button>
<button bindtap="clickNum" data-operation="{{-1}}">-</button>
<text>数据显示：{{num}}</text>

.js文件

Page({
  data: {
    num:0
  },
  // 输入框的执行逻辑
  myInput(e){
    // console.log(e.detail.value);
    this.setData({
      num:e.detail.value
  })
},
// 加减按钮的事件
clickNum(e){
  console.log(e.currentTarget.dataset.operation);
  const addnum=e.currentTarget.dataset.operation;
  this.setData({
    num:this.data.num+addnum
})
}
})