真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

VantWeapp小程序蹲坑之使用card組件顯示價格

問題

在基于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 Weapp小程序蹲坑之使用card組件顯示價格

吸引人的是,在Vant 1.6.8版本中提供了如下圖所示的示例頁面:
Vant Weapp小程序蹲坑之使用card組件顯示價格

夠可以的吧,只要稍加修改,便可為我所用了!但是......
在分析其對應的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


分享名稱:VantWeapp小程序蹲坑之使用card組件顯示價格
文章轉(zhuǎn)載:http://weahome.cn/article/gpjcpg.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部