- 输入框内容实时映射到下边的标签中显示
- 放两个按钮 + 和 -
点击 + 输入框输入的数字+1
点击 - 输入框输入的数字-1
- 需要给input标签绑定input事件
绑定关键字 bindinput - 获取输入框的值
通过事件源对象来获取 e.detai.value - 把输入框的值赋值到data当中
1. 不能直接写
this.data.num = e.detail.vaule (×)
this.num = e.detail.value (×)
2. 正确写法
this.serData({
num : e.detail.value
}) - 需要加入一个点击事件
1. bindtap
2. 无法在小程序当中的事件中直接传参
3. 通过自定义属性的方法来传递参数
4. 事件源中获取 自定义属性
<input type="text" bindinput="handleInput"/>
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view >{{num}}</view>
.js文件
data: {
num: 0
},
// 输入框的input事件的执行逻辑
handleInput(e) {
console.log(e.detail.value);
this.setData({
// num: e.detail.value
num: parseInt(e.detail.value)
});
},
//加 减 按钮事件
handletap(e) {
console.log(e);
//获取自定义属性operation
const operation = e.currentTarget.dataset.operation;
this.setData({
num: this.data.num + operation
})
},
