<!-- 單個數(shù)據(jù)監(jiān)聽 --> <view>白菜</view> <view>價格：{{price}}</view> <!-- bindinput輸入時觸發(fā)方法 --> <view>數(shù)量： <input type="number" bindinput='changee' value="{{num1}}"></input></view> <view>總價：{{sum}}</view><!-- 多個數(shù)據(jù)監(jiān)聽 --> <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: {},/*** 組件的初始數(shù)據(jù)*/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: { //觀察者：屬性監(jiān)聽//單個監(jiān)聽'num1'(num1) { this.setData({sum: num1*this.data.price})},//多個監(jiān)聽'num2,num3'(num2,num3){num2 == '' && (num2 = 0);num3 == '' && (num3 = 0);this.setData({sum2: parseFloat(num2) + parseFloat(num3)}) }}})

?

轉(zhuǎn)載于:https://www.cnblogs.com/duanzhenzhen/p/11304636.html

總結(jié)

以上是生活随笔為你收集整理的小程序自定义组件中observer函数的应用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。