小程式學習--observer函式的應用(元件中的業務)
阿新 • • 發佈:2018-11-13
需求是這樣的 就是構建月份的元件中,月份小於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中改變值 _index:val }) } }, },
這個函式的意義在於,當我們改變值的時候,微信小程式會主動呼叫這個函式,往這個函式傳值,也就是這三個引數:
newVal,oldVal,changedPath 程式碼的講解都在註釋中。
需要注意的是,我們通過判斷月份的值選擇加0,並賦值到一個變數中,再把這個變數賦值到渲染到頁面的變數時候,
不能和properties下的物件名字相同,為什麼?因為不能在observer函式中去改變屬性值,會出現無限遞迴的現象,也就是死迴圈
在該檔案的data部分增加一個值:——index
data: { _index:'',//不能和上面的index相同,所以增加下劃線區分開 },
選擇重新命名變數的下劃線的寫法!_index:val 來區分開來
而且,index值的資料型別必須是字串型別,為什麼?因為如果是數字型別Number的話,程式碼會判斷你是數字,就不會在數字前顯示出0,會將0去掉,即使你做的判斷沒有問題!
完成這些程式碼,最後一步,就是把元件的頁面的渲染值改掉 index改成——index
<text class="index">{{_index}}</text>