vue中使用过滤器filters属性实现商品金额小数点后两位显示

在做电商项目的时候，会遇到一个很常用的功能，那就是金额格式化，比如金额是整数（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>

显示结果：