目录​​​​​​​

一、数据监听器的概念

二、数据监听器的案例

---

一、数据监听器的概念

数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。他的作用类似于vue中的watch侦听器。在小程序组件中，数据监听器的基本语法格式如下：

observers:{'a,b':function(a,b){  //a,b表示变化的值，函数中的参数你可以自己起名字//逻辑}}

二、数据监听器的案例

给两个数字，点击对应的按钮加一，并显示两数相加的值

// components/new1/new1.js
Component({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {a:0,b:0,c:0},/*** 组件的方法列表*/methods: {add1(){this.setData({a:this.data.a+1})},add2(){this.setData({b:this.data.b+1})}},observers:{'a,b':function(a,b){this.setData({c:a+b})}}
})//wxml
<!--components/new1/new1.wxml-->
<view>a={{a}}</view>
<view>b={{b}}</view><button type="primary" bind:tap="add1">a+1</button>
<button type="primary" bind:tap="add2">b+1</button><view>{{a}}+{{b}}={{c}}</view>