【过滤器】过滤器作用以及如何实现全局过滤器

【背景】如果是大项目的话，使用全局过滤器再好不过啦！
【用法】多个字段用一个方法格式化，如果这些字段想要格式化或者进行数据处理，就可以想到用过滤器去实现。同样如果在三目运算符中使用也有不同的语法使用。
【注意】过滤的是数据处理后的想要渲染的数据，原数据不变。

一、Vue全局定义过滤器

1、如果全局过滤器过多，可以在一个单独的文件定义这些处理数据的方法。使用export default暴露出方法。

export default {
	fixed4ToPer(oldVal){
	  if(oldVal&&oldVal!='--'){
	    return Number.parseFloat(oldVal).toFixed(4)+'%'
	  }
	  return '--'
	}
}

2、在Vue实例创建之前定义

// 引入过滤文件
import filters from '@/assets/filters/index.js'

// 注册全局过滤器
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

二、如何使用过滤器

在模板中使用过滤器的示例：
1、普通使用：{{date | fixed4ToPer}}，管道符左侧是原数据，右侧是过滤的方法
2、如果是在动态样式（三目表达式）里面使用的话需要以下处理使用：$options.filters.fixed4ToPer(fixed4ToPer)，上面的普通使用是无效的。