微信小程序-数据监听器observers的基本使用

目的：带你实现一个监听数据变化从而自动计算结果的案例去认识监听器

结果图：

点按钮n1和n2的值改变，然后通过observers监听n1和n2的值 ，去计算结果值

wxml中的代码： 

<!-- 这里实现一个监听数据变化自动计算结果的案例去认识监听器 -->
<view>{{n1}} + {{n2}} = {{sum}}</view>
<button type="primary" bind:tap="n1">n1的值+1</button>
<button type="primary" bind:tap="n2">n2的值+1</button>

数据的代码，看看就好：

  /**
   * 组件的初始数据
   */
  data: {
    n1:0,
    n2:0,
    sum:0
  },

 微信小程序中js中的代码【这里只是两个按钮的方法】： 

  /**
   * 组件的方法列表
   */
  methods: {
    n1(){
      this.setData({
        n1:this.data.n1+1
      })
    },
  n2(){
      this.setData({
        n2:this.data.n2+1
      })
    },
  },

下面是重点：！！！【放在和methods同等级的目录下进行使用】下面是监听基本简单数据的

observers:{
    'n1,n2':function(n1new,n2new){
      this.setData({
        sum:n1new+n2new
      })
    }
  },

 简单吧！会了吗？ 建议尝试尝试！

监听对象数据如下图所示：【自己试试吧！】