在vue项目中,全局引入过滤器

### 创建和配置全局时间格式化过滤器Vue 3 中虽然官方不再支持过滤器作为内置特性,但仍然可以通过组合 API 和插件机制来实现相同功能。对于希望创建一个能够全局使用的时间格式化工具来说,推荐采用自定义指令或 Composition API 的方式。 为了保持代码的一致性和易维护性,在 `main.js` 文件引入第三方库 `dayjs` 或者继续沿用 `moment` 来处理日期格式化问题[^4]。下面展示如何利用 Composition API 实现这一目标: #### 安装依赖包 首先安装所需的日期处理库,这里以 `dayjs` 为例: ```bash npm install dayjs ``` #### 配置全局方法 编辑项目的入口文件 `main.js` ,添加如下代码片段用于注册全局属性 `$filters` : ```javascript import { createApp } from 'vue' import App from './App.vue' import dayjs from 'dayjs' // 自定义全局过滤器对象 const globalProperties = { $filters: { formatDate(date, fmt='YYYY-MM-DD HH:mm:ss') { return dayjs(date).format(fmt); } } } const app = createApp(App) app.config.globalProperties = Object.assign(app.config.globalProperties, globalProperties); export default app.mount('#app') ``` 这样做的好处在于可以在模板内像调用原生过滤器那样方便地使用这个新加入的方法: ```html <template> <div>{{ someDate | formatDate }}</div> <!-- 不再适用 --> <div>{{ $filters.formatDate(someDate) }}</div> <!-- 推荐写法 --> </template> <script setup> import { ref } from 'vue'; let someDate = ref(new Date()); </script> ``` 此外还可以进一步封装成插件形式以便更灵活地管理多个类似的辅助函数。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值