当前位置：首页 > news >正文

vue3 全局过滤器

news 来源：原创 2025/6/13 9:17:48

在Vue 3中，全局过滤器已经被移除，这是因为在Vue 3中，官方推荐使用其他方式来处理文本格式化或数据转换，例如使用计算属性（computed properties）、方法（methods）或者组合式API（Composition API）中的setup()函数配合自定义函数。下面是一些替代全局过滤器的方法：

方法1：使用计算属性

如果你想要根据某些数据动态地改变显示的内容，可以使用计算属性。

<template><div>{{ formattedDate }}</div>
</template><script setup>
import { computed } from 'vue';const rawDate = ref(new Date());
const formattedDate = computed(() => {return rawDate.value.toLocaleDateString();
});
</script>

方法2：创建自定义函数

你可以创建一个自定义函数来处理格式化逻辑，然后在模板或方法中使用它。

<template><div>{{ formatDate(rawDate) }}</div>
</template><script setup>
import { ref } from 'vue';const rawDate = ref(new Date());function formatDate(date) {return date.toLocaleDateString();
}
</script>

方法3：使用组合式API的`setup()`函数和自定义函数

如果你喜欢使用组合式API，可以在setup()函数中定义一个方法来处理格式化。

<template><div>{{ formatDate(rawDate) }}</div>
</template><script setup>
import { ref } from 'vue';const rawDate = ref(new Date());function formatDate(date) {return date.toLocaleDateString();
}
</script>

方法4：使用Vue 3的`watch`和`ref`或`reactive`结合计算属性

如果你需要根据某个值的变化来动态格式化数据，可以使用watch来观察这个值的变化，并更新显示。

<template><div>{{ formattedDate }}</div>
</template><script setup>
import { ref, watch, computed } from 'vue';const rawDate = ref(new Date());
const formattedDate = ref('');watch(rawDate, (newVal) => {formattedDate.value = newVal.toLocaleDateString();
});
</script>

或者使用计算属性自动响应依赖变化：

<template><div>{{ dateFormatter }}</div>
</template><script setup>
import { ref, computed } from 'vue';const rawDate = ref(new Date());
const dateFormatter = computed(() => rawDate.value.toLocaleDateString());
</script>

以上方法都是在Vue 3中替代全局过滤器的一些常见做法。每种方法都有其适用场景，你可以根据具体需求选择最合适的方式。