observers监听属性(只能在微信组件中用)
sum 求和组件
// sum.wxml
<view class="input_sum">
<input type="number" bindinput="handleInput" value="{{num1}}"/> + <input type="number" bindinput="handleInput1" value="{{num2}}"/> = <text>{{sum}}</text>
</view>
最后的样式就是这样
最重要的js 写法开始了
observers 要想执行的话是必须 你要监听的数据要setData()
所以写了两个事件更新num1和mum2
Component({
//初始化数据
data: {
sum: 0,
num1: null,
num2: null
},
methods: {
handleInput(e) {
this.setData({
num1: e.detail.value
})
},
handleInput1(e) {
this.setData({
num2: e.detail.value
})
}
},
observes: {
// 监听num1和num2的变化 动态改变sum的值
// 记住num1和num2 data已经更新 下面不需要更新!否则会死循环!
'num1,num2': (num1,num2) {
this.setData({
sum: Number(num1) + Number(num2)
})
}
}
})