如何使用与Vue 3兼容的Vue 2筛选器？
如何使用与Vue 3兼容的Vue 2筛选器？
提问于 2020-10-21 09:19:43
我使用的是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，也可用于
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-10-21 09:38:22
正如这里所述，使用管道操作符的https://v3-migration.vuejs.org/breaking-changes/filters.html#overview过滤器在Vue 3中不起作用，必须用方法或计算属性替换。
如果您将 2和Vue 3放入methods中，并将模板替换为方法调用来替换管道，那么它将同时在methods上工作。
但是，计算的属性可能会得到更好的优化，因为它应该缓存值(如果输入值没有改变，则会导致较少的操作)。
<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属性，如迁移策略(以及@N轮建议)中所建议的那样。
在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')
}Stack Overflow用户
发布于 2020-10-21 09:49:00
Vue 3不支持过滤器，就像Vue docs：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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64460478
复制相关文章
相似问题
腾讯云开发者
