在做电商项目的时候，会遇到一个很常用的功能，那就是金额格式化，比如金额是整数（100），那就直接显示100，如果是100.1或者100.10，则统一显示成100.10，如果存在小数位，那就直接显示两位小数。
淘宝网
这个功能实现起来不难，主要是在这里记录一下，好在下次遇到相同的的需求时，能够快速应用，快速开发。
filters.js
import Vue from 'vue'
/**
* 金额初始化处理
* @param value 调用过滤器时，输入的文本
*/
Vue.filter('priceValue', function (value) {
// 如果文本不存在，返回字符串
if (!value) {
return ''
}
// 文本转化为float
const result = parseFloat(value)
// 如果文本为 integer 类型的文本，表示当前文本没有小数
if (Number.isInteger(result)) {
return result
}
// 文本中包函数小数
return result.toFixed(2)
})
当然，不要忘记了，要在main.js中引入我们的filters.js
import '@js/filters.js'
在组件中使用
<template>
<div>
<p>{{12 | priceValue}}</p>
<p>{{12.1 | priceValue}}</p>
</div>
</template>
显示结果：
显示结果
