WXML——事件绑定和自定义标签属性传参（5）

标签

• input标签

格式 <input type="text"/>，text为输入框控件，
绑定事件：关键字——bindtap bindinput bindchange等
示例：<input type="text" bindinput="handleinput"/>  
      handleinput为在js中定义的事件执行函数
获取控件值：通过事件源对象（e.detail.value）获取
赋值函数：this.setData

• button标签

直接使用，内容就是button按钮的内容
格式：<button>按钮内容</button>
绑定事件：关键字——bind+标签名
		小程序的WXML的标签属性无法直接传参，
		因此不能写成<button bindtap="handletap（1）">+</button>这种，
		会认为handletap（1）整体是函数名

示例：输入值在另一行输出

demo.wxml

<input type="text" bindinput="handleinput"/>
<view>{{num}}</view>

demo.js

Page({
  data: {
    num:0
  },
  //输入框的input输入执行逻辑S
  handleinput(e){
    //console.log(e);//控制台打印
    this.setData({num:e.detail.value})//赋值
    //e绑定控件的事件获取到的源对象
  }
})

示例二：按加减号，使数字加减运算

demo.wxml

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

demo.js

Page({
  data: {
    num:0
  },
  handletap(e){
    //console.log(e);//控制台打印
    const operation= e.currentTarget.dataset.operation;
    this.setData({num:this.data.num+operation})
  }
})
//console.log(e)先用控制台打印，在consloe中的找到要WXML中要获取的标签/控件对应的值
//然后就可以用源事件e获取到这个变量名
//this.data.num就是指的在data中定义的num值

自定义标签属性传参

格式：data-名称="{{参数}}"

存放标签自定义属性的参数是currentTarget下的dataset，
只需要在data-后面添加自定义的属性名即可，再次打印会发现dataset属性下多出了一个属性值，
如：<button bindtap="handletap" data-operation="{{1}}">+</button>
通过js文件中绑定事件的console.log(e)查看参数内容