vue组件化挖矿之旅（三）：vue-cli 自定义过滤器的使用

Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示：

{{ message | capitalize }}

<div v-bind:id="rawId | formatId"></div>

在vue组件中可以自己定义过滤器

---

第一步：编写过滤器文件如（filter.js）,我们可以src文件夹中新建文件夹如:api文件夹，来存放filter.js文件

在filter.js文件夹中，代码如下：
首先 import Vue from "vue"，这样我们就可以编写一些自定义过滤器了，如代码所示，小编编写了一个简单的货币格式过滤器（formatPrice），用于货币格式化千分位以及自动补零功能。

import Vue from "vue"
/**
 * 货币格式化
 * currencyType 货币符号
 */

Vue.filter("formatPrice", function(value = "0", currencyType = "") {
  let res;
  if (value.toString().indexOf(".") === -1) {
    res = (value || 0).toString().replace(/(d)(?=(?:d{3})+$)/g, "$1,") + ".00"
  } else {
    let prev = value.toString().split(".")[0]
    let next = value.toString().split(".")[1] < 10 ? value.toString().split(".")[1] + "0" : value.toString().split(".")[1]
    res = (prev || 0).toString().replace(/(d)(?=(?:d{3})+$)/g, "$1,") + "." + next
  }
  return currencyType + res
})

---

第二步：在main.js文件中引入filter.js

import fliter from "./api/filter"

---

第三步：在组件中使用过滤器，直接使用过滤器函数名，就会在页面上渲染了

<li>{{123456.4 | formatPrice}}</li>

小编是前端小白，如有建议或者意见，请发送邮箱到 zhanglnb@seentao.com ，很高兴可以和大家讨论与进步