【背景】如果是大项目的话,使用全局过滤器再好不过啦!
【用法】多个字段用一个方法格式化,如果这些字段想要格式化或者进行数据处理,就可以想到用过滤器去实现。同样如果在三目运算符中使用也有不同的语法使用。
【注意】过滤的是数据处理后的想要渲染的数据,原数据不变。
一、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)
,上面的普通使用是无效的。