如何使用应该与Vue 3兼容的Vue 2使用过滤器

问题描述

我正在使用Vue js 2 +版本，并根据我的要求创建了一个用于日期格式的过滤器，但我听说在Vue 3中过滤器已删除，而需要使用计算或方法，这里的问题是我该如何编写兼容的版本对于版本2和版本3

我编写的Vue js 2过滤器

<ul>
       
  <li v-for="(info,index) in data">
     {{info.time.data | Filter}}
  <li>
<ul>

过滤请求：

    filters: {
  Filter(date){
     return moment.unix(date).utc().format('HH:mm a');
    
    }
  },

我如何编写可用于版本2和版本3的兼容方法

解决方法

如此处https://v3.vuejs.org/guide/migration/filters.html#overview所述-使用管道运算符的过滤器在Vue 3中不起作用，必须替换为方法或计算属性。

如果您将timeFilter放入methods并更改模板以替换 pipe，则它将同时在 Vue 2 和 Vue 3 上工作与方法调用。

但是可能更好地优化了计算属性，因为它应该缓存值（如果输入值未更改，结果将减少操作）。

<ul>
  <li v-for="(info,index) in data" :key="index">
     {{ timeFilter(info.time.data) }}
  <li>
<ul>

methods: {
  timeFilter(date) {
     return moment.unix(date).utc().format('HH:mm a');
  }
}

我们还可以使用迁移策略中建议的全局$ filters 属性（也建议使用@Naren）。

在Vue 2和Vue 3模板中：

<ul>
  <li v-for="(info,index) in data" :key="index">
     {{ $filters.timeFilter(info.time.data) }}
  <li>
<ul>

在Vue 3中：

// main.js
const app = createApp(App);

app.config.globalProperties.$filters = {
   timeFilter: date => moment.unix(date).utc().format('HH:mm a')
}

在Vue 2中：

Vue.prototype.$filters = {
   timeFilter: date => moment.unix(date).utc().format('HH:mm a')
}

Vue 3不支持过滤器，根据Vue文档：Filters are removed from Vue 3.0 and no longer supported.，但是您仍然可以将computed properties用于数据更改侦听器，否则methods就足够了。如果您想在全球范围内注册它们，可以使用以下命令

// main.js
const app = createApp(App)

app.config.globalProperties.$filters = {
   timeFilter: (date) => moment.unix(date).utc().format('HH:mm a')
}

<ul>
  <li v-for="(info,index) in data">
     {{ $filters.timeFilter(info.time.data) }}
  <li>
<ul>

javascript vue-filter vue.js