uni-app如何在nvue文件中使用过滤器

nvue中无法使用Vue.filter定义的全局过滤器，因其不经过Vue编译与运行时；替代方案为：①在data/computed中预格式化；②import工具函数调用；③模板内用简单表达式（需注意iOS日期解析缺陷）。

nvue 文件里不能直接用 Vue.filter 定义的全局过滤器

因为 nvue 是原生渲染层，不走 Vue.js 的编译和运行时逻辑，Vue.filter 注册的过滤器在 nvue 中完全不可见——哪怕你在 main.js 里写了，nvue 页面也压根不解析 | 管道语法，模板里写 {{ date | formatDate }} 会直接原样输出、不报错也不执行。

nvue 中替代 filters 的三种可行方式

别硬套 Vue 模板语法，得换思路：

1. 用 methods 或 computed 在 script 里提前格式化好再传给 template，比如：formattedDate: this.formatDate(this.rawDate)
2. 封装成工具函数，在 script 顶部 import { formatDate } from '@/utils/date'，然后在 data 或 methods 里调用
3. 如果必须在 template 里“就近处理”，用三元或简单表达式（仅限极简逻辑），例如：{{ date ? new Date(date).getFullYear() + '年' : '' }} ——但注意：这行代码在 iOS 上仍可能因字符串构造失败而返回 Invalid Date

为什么不能在 nvue 里 import filters 模块再手动调用

有人试过把 filters 写成独立函数导出，再在 nvue 里 import { formatDate } from '@/common/filters'，结果发现时间解析还是错——根本原因不是导入问题，而是 nvue 运行环境里 new Date('2026-04-21') 在 iOS 原生 WebView 中依然不认短横线格式。

所以真正要做的不是“怎么调用”，而是“怎么安全解析”：

1. 所有传入日期，先统一转时间戳：const ts = typeof date === 'string' ? Date.parse(date.replace(/-/g, '/')) : date
2. 再构造：const d = new Date(ts)，且必须显式判断 !isNaN(d.getTime()) 防止无效日期静默失败
3. nvue 不支持 uni.$date（它只在 Vue 实例上下文中可用），所以工具函数里别依赖 uni 实例方法

真正在 nvue 里安全格式化日期的最小可行示例

放在 @/utils/date.js 里：

export function formatDate(date, fmt = 'yyyy-MM-dd') {if (!date) return ''const ts = typeof date === 'string' ? Date.parse(date.replace(/-/g, '/')) : dateconst d = new Date(ts)if (isNaN(d.getTime())) return ''const year = d.getFullYear()const month = String(d.getMonth() + 1).padStart(2, '0')const day = String(d.getDate()).padStart(2, '0')return fmt.replace('yyyy', year).replace('MM', month).replace('dd', day)}

在 nvue 页面中：

<script>import { formatDate } from '@/utils/date'export default {data() {return {rawDate: '2026-04-21',displayDate: formatDate('2026-04-21')}}}</script>

记住：nvue 里没有魔法，也没有运行时 filter 编译。所谓“使用过滤器”，本质是手动调用纯函数——而且这个函数必须自己扛住 iOS 的 Date 解析缺陷。