前言

虽然 vue3 废除了过滤器，但我仍然念念不忘。怎么说呢？它很像普通函数，但使用方法又略有不同。它局部注册使用 filters ,全局注册使用 filter，还可以循环批量注册。我想你应该想到什么了？如果你了解组件的注册方法，我想你应该会感兴趣？

一、过滤器的局部注册使用

直接在需要的页面注册使用，只对当前页面有效

注册：filters ：函数（与 data 平级）
使用：模板中用管道符 | 分隔开 {{data里的变量名 | 过滤器函数名（）}}

<template>
  <div>
    <p>过滤器1：{{message|formatMsg}}</p>
    <p>过滤器2：{{mydate|formatMdt}}</p>
    <p>过滤器3：{{mydate|formatDate}}</p>
    <p>过滤器4：{{mydate|formatMyDate('2050')}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message:'我是过滤器',
      mydate:new Date()
    }
  },
  filters:{
    formatMsg(){
      return '我才是过滤器'
    },
    formatMdt(mdt){
      console.log(mdt)//刚好是 data 中的 mydate 对应的当前时间
      return mdt
    },
    formatDate(dt){
      let y=dt.getFullYear()
      let m=dt.getMonth()+1
      let d=dt.getDate()
      return `${y}-${m}-${d}`
    },
    formatMyDate(dt,dt2){
      // dt 是 data 中 的 mydate
      // dt2 是传递的 实参 2050
      console.log(dt,dt2);
      return dt2
    }
  }
}
</script>
复制代码

二、过滤器的全局注册使用

1、直接在 main.js 里面全局注册（但它是入口文件，建议抽离出来再导入 main.js）

注册：Vue.filter('函数名'，（）=>{})
使用：模板中用管道符 | 分隔开 {{data里的变量名 | 过滤器函数名（）}}

import Vue from 'vue'

Vue.filter('formatMsg', () => {
  return '我才是过滤器'
})

Vue.filter('formatMdt', (mdt) => {
  return mdt
})

Vue.filter('formatDate', (dt) => {
  let y = dt.getFullYear()
  let m = dt.getMonth() + 1
  let d = dt.getDate()
  return `${y}-${m}-${d}`
},
)

Vue.filter('formatMyDate', (dt, dt2) => {
  return dt2
})
复制代码

2、页面即可全局使用

<template>
  <div>
    <p>过滤器1：{{message|formatMsg}}</p>
    <p>过滤器2：{{mydate|formatMdt}}</p>
    <p>过滤器3：{{mydate|formatDate}}</p>
    <p>过滤器4：{{mydate|formatMyDate('2050')}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message:'我是过滤器',
      mydate:new Date()
    }
  }
}
</script>
复制代码

三、过滤器的批量注册使用

1、新建 src/filters/index.js,书写需要的函数

// 按需导出
export function formatMsg() {
    return '我才是过滤器'
}
export function formatMdt(mdt) {
    console.log(mdt)
    return mdt
}
export function formatDate(dt) {
    let y = dt.getFullYear()
    let m = dt.getMonth() + 1
    let d = dt.getDate()
    return `${y}-${m}-${d}`
}
export function formatMyDate(dt, dt2) {
    console.log(dt, dt2);
    return dt2
}
复制代码

2、main.js 导入，循环过滤器里面的函数，全局注册过滤器

// ◆导入
import * as filters from './filters'
// ◆循环注册过滤器里面的函数
Object.keys(filters).forEach((key)=>{
  Vue.filter(key,filters[key])
})
复制代码

3、所有页面均可使用，无需再次导入

<template>
  <div>
    <p>过滤器1：{{message|formatMsg}}</p>
    <p>过滤器2：{{mydate|formatMdt}}</p>
    <p>过滤器3：{{mydate|formatDate}}</p>
    <p>过滤器4：{{mydate|formatMyDate('2050')}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message:'我是过滤器',
      mydate:new Date()
    }
  }
}
</script>
复制代码