微信小程序实现加减

微信小程序实现加减

步骤：

1.给input绑定一个 input事件
bind:input=“函数”
2.获取输入框到的值
通过事件源对象
参数.detail.value
3.把输入框的值赋值到data中
不能直接
1.this.num = e.detail.value
1.this.data.num = e.detail.value
正确的写法
this.setData({
num:e.detail.value
})
4.加入点击事件
bindtap
无法在小程序当中的事件直接传参
比如 bind:tap=“handtap(1)”,这个是错误的写法
通过之定义属性的方式来传递参数
事件源中获取 自定义属性

wxml代码

<input type="text " bindinput="handleInput"></input>
<button bind:tap="handletap" data-operation="{{1}}">+</button>
<!-- data-operation给事件handletap传参-->
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<!-- data-operation给事件handletap传参-->
<view>
    {{num}}
</view>

js代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
    num: 0,
  },
  handleInput(e) {
    this.setData({
      num:e.detail.value
    })
  },
  /*加减按钮的事件*/
  handletap(e) {
    console.log(e)//为了找到我们想过要的值，    
  //  获取自定义属性operation
    const operation = e.currentTarget.dataset.operation;
    this.setData({
      num: this.data.num + operation
    })
  }
})

console.log(e)//为了找到我们想过要的值，

因为wxml中的handletap事件传入的参数是1
<button bind:tap="handletap" data-operation="{{1}}">+</button>
所以就在控制台console中找到我们要的值的路径
从图中可以知道是
e.currentTarget.dataset.operation