小程序自定义组件中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)
      })
    }
  }

})

原文地址：https://www.cnblogs.com/duanzhenzhen/p/11304636.html