vue3过滤器

《vue3过滤器》

开头解决方案

在Vue2中，过滤器（filters）是一个非常方便的工具，可以用于格式化文本、日期等。在Vue3中官方不再支持全局过滤器，推荐使用计算属性（computed）、方法（methods）或者组合式API中的函数来替代过滤器的功能，这使得代码更具有可维护性和可测试性。

使用计算属性

如果你需要根据一些数据进行简单的格式转换，并且这个转换结果会随着数据的变化而变化，那么计算属性是非常好的选择。
```html

import { computed } from 'vue'
const props = defineProps({
message: {
type: String,
default: ''
}
})

// 计算属性
const formattedMessage = computed(() => {
return props.message.toUpperCase()
})

</p>

<h2><h2>使用方法</h2></h2>

<p>当格式化逻辑较为复杂或者需要传递参数时，可以使用methods。例如对日期进行格式化：
```html

  <div>
    {{ formatDate(date) }}
  </div>
</p>


import { ref } from 'vue'
const date = ref(new Date())

function formatDate(value){
  const date = new Date(value)
  return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
}


<p>

组合式API中的函数

如果想要创建一个可以在多个组件之间共享的格式化逻辑，可以将其封装成一个函数，然后通过组合式API引入。
``javascript // utils/format.js export function formatPrice(value) { return￥${value.toFixed(2)}`
}

// 在组件中使用

import { formatPrice } from '@/utils/format'

console.log(formatPrice(10.5)) // 输出：￥10.50

```

在Vue3中虽然没有了过滤器，但通过上述这些方式同样能够实现类似过滤器的效果，而且可以使代码结构更加清晰合理。