【Vue项目】filters过滤器

本文主要是介绍【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);
});

把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')

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

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

在这个示例中，我们定义了一个名为 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>