在基于mpvue+Vant Weapp組件庫實戰(zhàn)過程中,問題越來越多。網(wǎng)絡(luò)上所謂的“坑”總結(jié),僅僅不過是其開發(fā)中所遭所遇之“坑”而已——估計后面的“坑”還多著呢!根據(jù)本人粗淺分析,這些“坑”與微信官方格式有密切關(guān)系。另一方面,只有“不會導致內(nèi)存泄漏”的坑,廣大開發(fā)人員應該還是會體諒的。
創(chuàng)新互聯(lián)專注于寶塔網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供寶塔營銷型網(wǎng)站建設(shè),寶塔網(wǎng)站制作、寶塔網(wǎng)頁設(shè)計、寶塔網(wǎng)站官網(wǎng)定制、小程序開發(fā)服務(wù),打造寶塔網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供寶塔網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
言歸正傳,今天在使用card組件顯示價格時出現(xiàn)問題了。問題的最初來由是我想把官方提供的H5版本轉(zhuǎn)換成小程序版本,參考下圖:
吸引人的是,在Vant 1.6.8版本中提供了如下圖所示的示例頁面:
夠可以的吧,只要稍加修改,便可為我所用了!但是......
在分析其對應的github源碼時,發(fā)現(xiàn)如下代碼(為了便于參考,還是復制大部分吧):
注意其中這一段中的價格部分:
這里使用了v-bind方法顯示價格,其中使用了帶參數(shù)函數(shù)的計算方法。一切看似非常一般,但是問題就在這里!
測試結(jié)果是價格部分不顯示。
經(jīng)過分析小程序版本的vant weapp組件card并結(jié)合進一步測試得到如下結(jié)論:
在mpvue+vant weapp小程序開發(fā)環(huán)境下,這里card組件的價格部分不能使用帶參數(shù)的函數(shù)計算方式,具體結(jié)論見下表:
表達形式 | 結(jié)果 |
---|---|
:price="formatPrice(item.price)" | 不顯示 |
:price="Math.sin(1)+67" | 不顯示 |
:price="Math.PI" | 不顯示 |
:price="item.price" | 顯示正常 |
:price="item.price/100" | 顯示正常 |
:price="formatPrice()" | 不顯示 ! |
:price="formatPrice" | 顯示正常! |
需要注意的是,表格中最后兩行。其中,formatPrice()是函數(shù)形式,不可以,而且出現(xiàn)錯誤提示。但是,最后一行使用不帶括號的formatPrice而且這個formatPrice放在計算屬性(computed)中完全可以!
有關(guān)vue開發(fā)中computed段與methods段的區(qū)別在網(wǎng)絡(luò)上有很多介紹,在此不贅述。但是,有一點需要明確,就是:
methods段中你可以根據(jù)需要創(chuàng)建任意形式的帶參數(shù)或者不帶參數(shù)的函數(shù);但是,computed段中你只能創(chuàng)建不帶參數(shù)的函數(shù)(不算setter函數(shù))。上面表格最后一行中的formatPrice正是computed段中的一個無參數(shù)函數(shù)。
但是,在本文上面案例中,是要求以v-for循環(huán)指令方式顯示每一件商品的價格的,因此,需要傳遞一個代表當前商品id的參數(shù),但遺憾的是,這種帶參數(shù)的函數(shù)是無法在computed段中表達的。
其實,進一步分析這個函數(shù)formatPrice的內(nèi)容:
formatPrice(price) {
return (price / 100).toFixed(2);
}
也不過是對于傳遞的價格參數(shù)縮小了100倍(因默認單位是分),然后保留兩位小數(shù)。于是,我推薦使用如下方案:
:price="item.price/100"
也就是說,把分轉(zhuǎn)換成元單位即可,保留小數(shù)的任務(wù)可以交由服務(wù)端完成。
https://github.com/youzan/vant-demo/blob/master/base/src/view/cart/index.vue
https://www.jianshu.com/p/579035fc9c18