更新时间:2023-07-17 来源:黑马程序员 浏览量:
数据监听器用于监听和响应任何属性和数据字段的变化,从而执行特定的操作。它的作用类似于vue中的watch侦听器。在小程序组件中,数据监听器的基本语法格式如下:
//组件的UI结构如下 <vievt{{n1}} + {{n2}} = {{sum}}</viev> <button size="mini"bindtap="addN1">n1自增</button> <button size="mini"bindtap="addN2">n2自增</button>
组件的 .js 文件代码如下:
Component({ data:{n1:0,n2:0,sum:0},//数据节点 methods:{//方法列表 addN1(){ this.setData({n1:this.data.n1 +1 })}, addN2(){this.setData({n2:this.data.n2 + 1 })} }, observers:{//数据监听节点 'n1,n2':function(n1,n2){ //监听 n1和n2数据的变化 this.setData({ sum:n1 +n2 })//通过监听器,自动计算 sum的值 } } })
数据监听器支持监听对象中单个或多个属性的变化,示例语法如下:
Component({ observers: { ‘对象.属性A,对象.属性B':function(属性A的新值,属性B的新值){ //触发此监听器的3种情况: //【为属性A赋值】使用 setData 设置 this.data.对象.属性A 时触发 //【为属性B赋值】使用 setData 设置 this.data.对象、属性B 时触发 // 【直接的对象赋值】使用 setData 设置this.data.对象时触发 // do something.…. } } })