码迷,mamicode.com
首页 > 微信 > 详细

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

时间:2019-08-05 18:59:08      阅读:590      评论:0      收藏:0      [点我收藏+]

标签:server   enum   ice   span   code   dex   bin   inline   ber   

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

})

 

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

标签:server   enum   ice   span   code   dex   bin   inline   ber   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!