【微信小程序2】事件传参与数据同步[03]

为data中的数据赋值

通过调用this.setData(dataObject)方法，可以给页面data中 数据重新赋值

//页面的.js文件中
Page({
    
	data:{
    
		count: 0
	},
	changeCount(){
    
		this.setData({
    
			count: this.data.count+1
		})
	}
})

配套

//在.wxml中
<button type="primary" bindtap="CountChange">+1</button>

事件传参

• 错误示例

<button type="primary" bindtap='btn(123)'>事件传参</button>

此时，小程序会把(123)当成是一个统一的时间名称来处理

• 正确示范

<button bindtap="btn" data-info="{
    {2}}">事件传参</button>

最终：

1. info会被解析为参数的名字
2. 数值2会被解析为参数的值
3. 不加{ {}}的2被解析为文本形式
4. 使用event.target.dataset.参数名 即可获得到具体参数的值

配套

//在.js文件中
btn(e){
    
	console.log(e)
},

点击按钮后：

bindinput的语法格式-获取文本输入框内值

1. 通过bindinput,可以为文本框绑定输入事件

//.wxml文件中
<input bindinput="inputHandler"><input>

2. 在页面.js文件中定义事件处理函数

inputHandler(e){
    
	//e.detail.value是变化过后，文本框最新的值
	console.log(e.detail.value)
}

实现文本框和data之间的数据同步

1. 在.js文件中定义data

data{
    
   msg: '你好,'
 },

2. 在上一步的基础上，改造.wxml文件

<input value="{
    {msg}}" bindinput="inputHandler"></input>

此时，页面文本框效果如下：

3. 通过修改.wxss进一步美化

input{
    
  border: 1px solid #eee;
  margin: 5px;
  padding: 5px;
  border-radius: 3px;
}

此时，文本框效果：

4. 获取文本框内最新值

inputHandler(e){
    
    //e.detail.value是变化过后，文本框最新的值
    // console.log(e.detail.value)
    this.setData{
    
      msg: e.detail.value
    }