微信小程序 - 13.事件绑定

1. 输入框内容实时映射到下边的标签中显示
2. 放两个按钮 + 和 -
   点击 + 输入框输入的数字+1
   点击 - 输入框输入的数字-1

1. 需要给input标签绑定input事件
   绑定关键字 bindinput
2. 获取输入框的值
   通过事件源对象来获取 e.detai.value
3. 把输入框的值赋值到data当中
   1. 不能直接写
   this.data.num = e.detail.vaule (×)
   this.num = e.detail.value (×)
   2. 正确写法
   this.serData({
   num : e.detail.value
   })
4. 需要加入一个点击事件
   1. bindtap
   2. 无法在小程序当中的事件中直接传参
   3. 通过自定义属性的方法来传递参数
   4. 事件源中获取 自定义属性

<input type="text" bindinput="handleInput"/>
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view >{{num}}</view>

.js文件

  data: {
    num: 0
  },

  // 输入框的input事件的执行逻辑
  handleInput(e) {
         console.log(e.detail.value);
         this.setData({
               // num: e.detail.value
               num: parseInt(e.detail.value) 
         });
  },

  //加 减 按钮事件
  handletap(e) {
     console.log(e);
     //获取自定义属性operation
     const operation = e.currentTarget.dataset.operation;
     this.setData({
           num: this.data.num + operation
     })
  },