小程序自定義組件中observer函數的應用

<!-- 單個數據監聽 -->
<view>白菜</view>
<view>價格：{{price}}</view>
<!-- bindinput輸入時觸發方法 -->
<view>數量： <input type="number"  bindinput='changee' value="{{num1}}"></input></view>
<view>總價：{{sum}}</view>

<!-- 多個數據監聽 -->
<view class='sum2'>
<input class='inlineInput' type="number"  bindinput='changeNum2' value="{{num2}}"></input>+
<input class='inlineInput' type="number"  bindinput='changeNum3' value="{{num3}}"></input>=
<text>{{sum2}}</text>
</view>

js

// components/date/index.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
   
  },

  /**
   * 組件的初始數據
   */
  data: {
    num1: 0,
    sum:0,
    price: 2,
    num2: 0,
    num3: 0,
    sum2: 0
  },

  /**
   * 組件的方法列表
   */
  methods: {
    changee(e){
      // console.log(e);
      let num1 = e.detail.value;
      this.setData({
        num1: num1
      })
    },
    changeNum2(e){
      let num2 = e.detail.value;
      this.setData({
        num2: num2
      })
    },
    changeNum3(e) {
      let num3 = e.detail.value;
      this.setData({
        num3: num3
      })
    }
  },
  observers: { //觀察者：屬性監聽
    //單個監聽
    'num1'(num1) {  
      this.setData({
        sum: num1*this.data.price
      })
    },
    //多個監聽
    'num2,num3'(num2,num3){
      num2 == '' && (num2 = 0);
      num3 == '' && (num3 = 0);
      this.setData({
        sum2: parseFloat(num2) + parseFloat(num3)
      })  
    }
  }

})