小程序自定义组件中observer函数的应用

Posted 2022-06-13 duanzhenzhen

<!-- 单个数据监听 -->
<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)
      )  
    
  

)