小程序observer函數的應用


需求是這樣的 就是構建月份的組件中,月份小於10月的時候 顯示的數字都是一個位數,需要轉換成兩位數,

比如8月份是8 ,那就要轉換為08 ,同理可得 其他低於十月份的月份也是要這樣做:

打開組件的js文件

接下來看下代碼:

properties: {
//月份的值
index:{
type:String,
//不能在observer函數中去改變值,容易出現無限加載死循環!
observer:function(newVal,oldVal,changedPath){
let val = newVal < 10 ? '0'+newVal :newVal;//判斷值如果是個位數前面補0 否則輸出原來的值
//更新數據
this.setData({
// index:val,val賦值 但是會導致遞歸加載 內存耗盡,所以在data中改變值
num: val
})
}
},
}
這個函數的意義在於,當我們改變值的時候,微信小程序會主動調用這個函數,往這個函數傳值,也就是這三個參數:

newVal,oldVal,changedPath  代碼的講解都在注釋中。

需要注意的是,我們通過判斷月份的值選擇加0,並賦值到一個變量中,再把這個變量賦值到渲染到頁面的變量時候,

 

不能和properties下的對象名字相同,為什么?因為不能在observer函數中去改變屬性值,會出現無限遞歸的現象,也就是死循環

在該文件的data部分增加一個值:num

data: {

num: '',//不能和上面的index相同,所以重新命名

}
 

選擇重命名變量的下划線的寫法!num: val  來區分開來

而且,index值的數據類型必須是字符串類型,為什么?因為如果是數字類型Number的話,代碼會判斷你是數字,就不會在數字前顯示出0,會將0去掉,即使你做的判斷沒有問題!

完成這些代碼,最后一步,就是把組件的頁面的渲染值改掉 index改成 num

<text class="index">{{ num }}</text>
 
---------------------
作者:那顆星好美
來源:CSDN
原文:https://blog.csdn.net/qq_42767631/article/details/84949381
版權聲明:本文為博主原創文章,轉載請附上博文鏈接!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM