VantWeapp小程序蹲坑之使用card组件显示价格-创新互联

问题

在基于mpvue＋Vant Weapp组件库实战过程中，问题越来越多。网络上所谓的“坑”总结，仅仅不过是其开发中所遭所遇之“坑”而已——估计后面的“坑”还多着呢！根据本人粗浅分析，这些“坑”与微信官方格式有密切关系。另一方面，只有“不会导致内存泄漏”的坑，广大开发人员应该还是会体谅的。

成都创新互联是专业的天祝藏族自治网站建设公司，天祝藏族自治接单;提供成都网站设计、做网站,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行天祝藏族自治网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

言归正传，今天在使用card组件显示价格时出现问题了。问题的最初来由是我想把官方提供的H5版本转换成小程序版本，参考下图：

吸引人的是，在Vant 1.6.8版本中提供了如下图所示的示例页面：

够可以的吧，只要稍加修改，便可为我所用了！但是......
在分析其对应的github源码时，发现如下代码（为了便于参考，还是复制大部分吧）：

注意其中这一段中的价格部分：

这里使用了v-bind方法显示价格，其中使用了带参数函数的计算方法。一切看似非常一般，但是问题就在这里！
测试结果是价格部分不显示。

初步答案

经过分析小程序版本的vant weapp组件card并结合进一步测试得到如下结论：

在mpvue＋vant weapp小程序开发环境下，这里card组件的价格部分不能使用带参数的函数计算方式，具体结论见下表：

表达形式	结果
:price="formatPrice(item.price)"	不显示
:price="Math.sin(1)+67"	不显示
:price="Math.PI"	不显示
:price="item.price"	显示正常
:price="item.price/100"	显示正常
:price="formatPrice()"	不显示 !
:price="formatPrice"	显示正常!

需要注意的是，表格中最后两行。其中，formatPrice()是函数形式，不可以，而且出现错误提示。但是，最后一行使用不带括号的formatPrice而且这个formatPrice放在计算属性（computed）中完全可以！

进一步分析

有关vue开发中computed段与methods段的区别在网络上有很多介绍，在此不赘述。但是，有一点需要明确，就是：
methods段中你可以根据需要创建任意形式的带参数或者不带参数的函数；但是，computed段中你只能创建不带参数的函数（不算setter函数）。上面表格最后一行中的formatPrice正是computed段中的一个无参数函数。
但是，在本文上面案例中，是要求以v-for循环指令方式显示每一件商品的价格的，因此，需要传递一个代表当前商品id的参数，但遗憾的是，这种带参数的函数是无法在computed段中表达的。
其实，进一步分析这个函数formatPrice的内容：

formatPrice(price) {
      return (price / 100).toFixed(2);
    }

也不过是对于传递的价格参数缩小了100倍（因默认单位是分），然后保留两位小数。于是，我推荐使用如下方案：

:price="item.price/100"

也就是说，把分转换成元单位即可，保留小数的任务可以交由服务端完成。

主要参考

https://github.com/youzan/vant-demo/blob/master/base/src/view/cart/index.vue
https://www.jianshu.com/p/579035fc9c18

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

当前文章：VantWeapp小程序蹲坑之使用card组件显示价格-创新互联
当前URL：http://cdxtjz.com/article/hpcje.html