vue 中全局filter过滤器的配置及使用

一. 在src下面新建filters/index.js

const currency = (price) => {
  if (!price) return '0.00'
  return `人民币${price.toFixed(2)}`
}

export default {
  currency
}

这里的函数就相当于把红色方框里的函数抽离出来,单独放在一个文件

二. 在main.js中引入和注册全局过滤器

import filters from './filter/index'
Object.keys(filters).forEach(filterName => {
  Vue.filter(filterName, filters[filterName])
})

// Object.keys(filters)得到的就是filters/index.js里面的函数名组成的数组 ['currency '] 因为这里index.js里面就一个函数所以数组里就只有一个值
//filterName 就是通过遍历['currency '] 得到的就是index.js中的每一个函数名(过滤器名字)
//filters[filterName])出发./filter/index中的某个函数

三. 在不同的.vue中使用定义的全局过滤器了

 <div class="proPrice">{{66  | currency}}元</div>
// currency就是过滤器名

最终打印的是 66.00