第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>

效果图如下:

在这里插入图片描述

当数量变化时,总价也跟着变化!

阅读终点,创作起航,您可以撰写心得或摘录文章要点写篇博文。去创作
  • 1
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
微信小程序是一种轻量级的应用程序开发平台,而Mobx是一种状态管理库。在微信小程序开发中,Mobx可以帮助我们更好地管理和控制应用程序的状态。 Mobx的核心概念是可观察的状态和动态计算。通过使用Mobx,我们可以将应用程序的状态定义为可观察的对象,当状态发生变化时,相关的观察者将自动被通知到。这种响应式的设计模式可以帮助我们更好地组织和管理应用程序的状态,并在状态变化时及时更新相关的界面。 在微信小程序中使用Mobx,我们首先需要将Mobx集成到我们的项目中。可以通过npm安装mobx,并在小程序的入口文件中引入和配置Mobx。接下来,我们需要定义可观察的状态。在小程序中,我们可以使用Mobx提供的@observable装饰器将我们的数据定义为可观察的属性。 当我们的可观察状态发生变化时,我们可以使用Mobx提供的@computed装饰器来定义动态计算属性。这些动态计算属性将根据可观察状态的变化而自动更新,以保持数据的一致性。 除了可观察状态和动态计算属性,Mobx还提供了其他一些功能,如@action装饰器用于定义状态的修改方法,@observer装饰器用于将组件与状态关联起来等等。这些功能可以帮助我们更好地管理和控制应用程序的状态。 总之,微信小程序中的Mobx是一个非常实用的状态管理库,可以帮助我们更好地组织、管理和控制应用程序的状态。通过使用Mobx,我们可以更高效地开发和维护小程序,并提供更好的用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

舜岳

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值