第14课 微信小程序observers属性监听器：

第14课 微信小程序observers属性监听器：

observers数据监听器可以用于监听和响应任何属性和数据字段的变化

组件内使用observers数据监听器：

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
  },
  data: {
    // 这里是一些组件内部数据
    //content: 'sdcedc', //主件的数据显示权比behavior高
    amount: 1,
    price: 2,
    priceall: 0
  },
  observers:{ //观察者：属性监听
    'amount'(data) {  //单个监听
      console.log('数量改变了')
    },
    'amount,price'(amount, price) {  //多个监听
      this.setData({
        priceall: amount * price
      })
    }
  },
  methods: {
    // 这里是一个自定义方法
    changee(e) {
      let amounts = e.detail.value
      // console.log(amounts)
      this.setData({
        amount: amounts
      })
      console.log(this.data.amount)
      // this.data.amount = e.detail.value
    }
  }
})

下面是wxml代码：

<view>白菜</view>
<view>价格：{{price}}</view>
<!-- bindinput输入时触发方法 -->
<view>数量： <input type="number"  bindinput='changee' value="{{amount}}"></input></view>
<view>总价：{{priceall}}</view>

效果图如下：

当数量变化时，总价也跟着变化！