微信小程序observers属性监听器

待我称王封你为后i 2022-11-09 14:13 325阅读 0赞

微信小程序observers属性监听器

# 微信小程序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>
    
    <view>数量： <input type="number"  bindinput='changee' value="{
       {amount}}"></input></view>
    <view>总价：{
       {priceall}}</view>

效果图如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI1MTkwMg_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI1MTkwMg_size_16_color_FFFFFF_t_70]: /images/20221023/cb509824286844d38ff9a166c5401fe2.png