微信小程序学习（三）——绑定事件

1.输入数值并在页面上显示

input标签是输入标签，可以获取用户在页面上的输入，绑定一个input事件获取数据e，而input事件的名称是可以自己在JS文件的Page字段命名的。格式bindinput="函数名"

    1）需要给input标签绑定input事件，绑定关键字bindinput

    2）获取输入框的值，通过事件源对象来获取，通过控制台console.log(e)的打印发现，值被存放在e.detail.value中

    3）把输入框中的值赋值到data中，但是不能像之前使用CPP那样直接赋值

 正确写法：

 this.setData(
    {
        num:e.detail.value
    }
    )

页面的HTML文件

<input type="text"  bindinput="handleInput"/>
<view>      </view>
<view>
   {{nums}}
</view>

页面的JS文件

// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    nums: 0
  },
  //输入框的input事件的执行逻辑
  handleInput(e) {
    console.log(e.detail.value);//打印
    this.setData(
      {
        nums: e.detail.value
      }
    )
  }
})

 

 2.使用按钮控制页面屏幕上的数字加一减一

<button>标签是按钮标签，使用bindtab属性可以绑定一个点击事件函数。格式：bindtab="事件函数名称"

    1）为button标签绑定事件使用bindtab属性

    2）无法在小程序当中的事件中直接传参-如果直接传参的话会被识别为函数的命名的

   3）通过自定义属性的方式来传递参数  使用button标签的data-operation属性来为事件传参

   4）事件源中获取自定义属性   同样可以打印出来，看看data-operation属性的值在哪里

页面的HTML文件

<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>      </view>
<view>
   {{nums}}
</view>

 页面的JS文件

// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    nums: 0
  },
  //加减按钮的事件
  handletap(e){
    //console.log(e);
    //获取自定义属性 operation
    const operation = e.currentTarget.dataset.operation;
    this.setData({ nums: this.data.nums + operation })
  }
})

点击  ‘-’  的按钮