vue3.0实现过滤器

Vue 3.0 实现过滤器的方法

在 Vue 3.0 中，过滤器（Filters）的概念已被移除，官方推荐使用计算属性（Computed Properties）或方法（Methods）来替代。以下是几种实现类似过滤器功能的方案：

使用计算属性（Computed Properties）

计算属性是 Vue 的响应式特性之一，适合对数据进行格式化或处理。

<template>
  <div>{{ formattedPrice }}</div>
</template>

<script>
export default {
  data() {
    return {
      price: 100
    }
  },
  computed: {
    formattedPrice() {
      return '$' + this.price.toFixed(2)
    }
  }
}
</script>

使用方法（Methods）

通过方法可以在模板中直接调用，灵活性更高。

<template>
  <div>{{ formatPrice(price) }}</div>
</template>

<script>
export default {
  data() {
    return {
      price: 100
    }
  },
  methods: {
    formatPrice(value) {
      return '$' + value.toFixed(2)
    }
  }
}
</script>

使用全局属性（Global Properties）

在 Vue 3.0 中，可以通过 app.config.globalProperties 注册全局方法，模拟过滤器的功能。

// main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.config.globalProperties.$filters = {
  formatPrice(value) {
    return '$' + value.toFixed(2)
  }
}

app.mount('#app')

在组件中使用：

<template>
  <div>{{ $filters.formatPrice(price) }}</div>
</template>

<script>
export default {
  data() {
    return {
      price: 100
    }
  }
}
</script>

使用自定义指令（Directives）

虽然不常见，但可以通过自定义指令实现类似过滤器的功能。

// main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.directive('format', {
  mounted(el, binding) {
    el.textContent = '$' + binding.value.toFixed(2)
  }
})

app.mount('#app')

在模板中使用：

<template>
  <div v-format="price"></div>
</template>

<script>
export default {
  data() {
    return {
      price: 100
    }
  }
}
</script>

总结

Vue 3.0 虽然移除了过滤器，但提供了多种替代方案。计算属性适合简单的数据转换，方法提供了更高的灵活性，全局属性可以模拟全局过滤器，自定义指令则适合特定的 DOM 操作场景。根据实际需求选择合适的方案即可。