vue中过滤器的使用

说明

   **过滤器本质是就是一个函数，特别适合来做格式转换。例如：把一个标准时间转成相对时间 。**

局部过滤器

定义格式 : 在模板中定义

filters: {
  过滤器名 (要被处理的值) {
    // .... 
    return 处理后的结果
  }
}

使用格式

{{ 原数据 | 过滤器名 }}

全局过滤器

定义格式 : 在main.js中定义

Vue.filter('过滤器名'， (oldVal) => {
  // ...
  return 处理后的结果
})

使用格式:

{{ 原数据 | 过滤器名 }}

将过滤器封装成单独模块全局使用

创建xxx.js文件封装过滤器函数

export const 过滤器函数名 (要被处理的值) {
    // .... 
    return 处理后的结果
}

在main.js中定义全局过滤器引入并使用过滤器函数

import { 过滤器函数名 } from '@/utils/xxx.js'
Vue.filter('过滤器名'，过滤器函数名)

使用过滤器

{{ 原数据 | 过滤器名 }}