uni-app中过滤器仅Vue 2模式支持，Vue 3模式已移除该语法；需先确认项目vueVersion配置，若为Vue 3应改用计算属性或方法替代。
uni-app 里过滤器不能直接用 v-filter 或 {{ value | filter }}？
uni-app 的 Vue 2 模式（默认）支持全局/局部过滤器，但 Vue 3 模式（vueVersion: 3）已彻底移除过滤器语法 —— 这是绝大多数人踩坑的起点。如果你在 pages.json 或 manifest.json 里设了 "vueVersion": "3"，或者用的是 HBuilderX 3.7+ 新建的默认项目，{{ distance | formatDistance }} 会直接报错：Property 'formatDistance' does not exist on type 'ComponentPublicInstance'。
所以第一步不是写过滤器，而是确认你的项目用的是 Vue 2 还是 Vue 3：
- 查
vue.config.js或manifest.json中是否有"vueVersion": "3" - 运行
npm run info看输出里的Vue version - 如果已是 Vue 3，别硬套过滤器，改用计算属性或方法
Vue 2 模式下怎么定义和注册距离格式化过滤器
全局过滤器最常用，写在 main.js 里即可生效所有页面：
// main.js
import Vue from 'vue'
Vue.filter('formatDistance', function (value) {
if (typeof value !== 'number') return ''
if (value < 1000) return value + 'm'
return (value / 1000).toFixed(1) + 'km'
})
注意三点：
-
value必须是数字，否则.toFixed()会报TypeError: Cannot read property 'toFixed' of undefined -
toFixed(1)返回字符串，所以拼接'km'没问题；但若后续还要参与计算，得先parseFloat() - 不要在过滤器里做耗时操作（比如调用
uni.getLocation），它只负责格式化，不负责获取原始距离
模板中直接使用：{{ distance | formatDistance }}
Vue 3 模式下替代方案：用 computed 或 methods 实现相同效果
推荐封装成可复用的方法，放在 utils/distance.js：
// utils/distance.js
export function formatDistance(value) {
if (typeof value !== 'number') return ''
if (isNaN(value)) return ''
if (value < 0) return '0m'
if (value < 1000) return Math.round(value) + 'm'
return (value / 1000).toFixed(1) + 'km'
}
在组件里导入并使用：
<template>
<view>{{ formatDistance(distance) }}</view>
</template>
<script>
import { formatDistance } from '@/utils/distance.js'
export default {
methods: { formatDistance }
}
</script>
这样既兼容 Vue 3，也便于单元测试和复用 —— 比过滤器更可控。
精度和单位边界容易出错的地方
真实场景中，后端返回的距离可能是浮点数（如 999.876 米）、整数（1500 米），也可能为 null、undefined 或字符串 "1234"。直接 Number(value) 转换不保险：
-
Number('')→0，可能误显示0m，实际应为空 -
Number('abc')→NaN，NaN.toFixed()报错 - 临界值如
999.9米，四舍五入后仍应显示999.9m，而不是进到1.0km（除非业务明确要求“≥1000 米才转 km”）
更稳妥的写法：
if (!value || typeof value === 'string' && !/^[0-9.]+$/.test(value)) return '' const num = Number(value) if (isNaN(num) || num < 0) return '' return num < 1000 ? Math.round(num) + 'm' : (num / 1000).toFixed(1) + 'km'
边界逻辑必须按产品需求对齐，比如是否保留小数、如何处理负数、空值显示什么 —— 这些没法靠“通用过滤器”自动解决。
