微信小程序事件绑定和点击事件
微信小程序事件绑定和点击事件
<!-- 
  1 需要给input 标签绑定 input 事件
    绑定关键字 bindinput
  2 如何获取 输入框的值
    通过事件源对象来获取
    e.detail.value
  3 把输入框的值 赋值到 data 当中
    不能直接:
            1 this.data.num = e.detail.value
            2 this.num = e.detail.value
    正确的写法:
            this.setData({
          
   
              num:e.detail.value
            })
  4 需要加入一个点击事件
      1 bindtap
      2 无法在小程序当中的事件中直接传参
      3 通过自定义属性的方式来传递参数
      4 事件源中获取 自定义属性
 --> 
demo.wxml
<input type="" bindinput="handleInput"></input>
<button bindtap="handtap" data-operation="{
           
    {1}}">+</button>
<button bindtap="handtap" data-operation="{
           
    {-1}}">-</button>
<view> {
         
  {num}}</view> 
demo.json
Page({
          
   
  /**
   * 页面的初始数据
   */
  data: {
          
   
    num:0
  },
  // 输入框的input事件的执行逻辑
  handleInput(e){
          
   
    // console.log(e.detail.value);
    this.setData({
          
   
      num:e.detail.value
    }) 
  },
  // 加 减 按钮的事件
  handtap(e){
          
   
    // console.log(e);
    // 1 获取自定义属性 operation
    const operation = e.currentTarget.dataset.operation;
    this.setData({
          
   
      num: parseInt(this.data.num) + operation
    }) 
  }
}) 
示例
上一篇:
			            uniapp开发微信小程序-2.页面制作 
			          
			          下一篇:
			            微信小程序picker滚动选择器使用详解 
			          
			        