【Vue项目】filters过滤器

在vue项目中需要对一些数据进行格式化，我们可以通过Vue.filter进行过滤

Vue.filter

过滤器在 Vue 实例中使用 Vue.filter 方法进行注册，注册成功就可以在任何 Vue模板中使用这些过滤器来对数据进行处理和格式化。

Vue项目中，过滤器可以在全局范围和局部范围内使用。

全局过滤器

全局过滤器是在 Vue 实例化之前定义的过滤器，它们可以在整个 Vue 应用程序中的任何组件中使用。通常在 Vue 实例化之前，通过 Vue.filter 方法来定义全局过滤器。例如：
在utils文件夹中创建filter.js文件：

// /src/utils/filter.js
import Vue from 'vue';
import moment from 'moment';
import 'moment/locale/zh-cn';
import 'moment/locale/zh-tw';
import 'moment/locale/en';
const defaultLang = 'zh-tw'
const currentLang = localStorage.getItem('lang') || defaultLang
// 设置moment插件是用当前语言
moment.locale(currentLang);

Vue.filter('dayjs', function (dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
  return moment(dataStr).format(pattern);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

把filter.js文件作为模块引入main.js

import Vue from 'vue'
import i18n from './i18n'
import App from './App.vue'
import store from './store/'
import router from './router'
// 项目全局配置
import './utils/filter'
...
new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14

可以在整个项目其他vue实例中使用：

<template>
  <div>
    <p>{{ someDate | dayjs }}</p>
  </div>
</template>
1
2
3
4
5

在这个示例中，我们定义了一个名为 dayjs 的全局过滤器，用于将日期格式化为指定的格式。在任何 Vue 组件中，只要使用了 dayjs 这个过滤器，它都会生效。这里做了多语言化

局部过滤器

局部过滤器是在组件的选项中定义的过滤器，它们只能在当前组件的模板中使用。在组件的选项中，通过 filters 属性来定义局部过滤器。例如：

<template>
  <div>
    <p>{{ someDate | dayjs }}</p>
  </div>
</template>

<script>
import moment from 'moment';
// moment多语言包
import 'moment/locale/zh-cn';
import 'moment/locale/zh-tw';
import 'moment/locale/en';
const defaultLang = 'zh-tw'
const currentLang = localStorage.getItem('lang') || defaultLang
// 设置moment插件是用当前语言
moment.locale(currentLang);

export default {
  data() {
    return {
      someDate: '2022-01-01'
    };
  },
  filters: {
    dayjs(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
      return moment(dataStr).format(pattern);
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

在这个示例中，我们在组件的选项中定义了一个名为 dayjs 的局部过滤器。在模板中使用 dayjs 过滤器时，它只能在当前组件中生效。