过滤器在日常开发中也算是比较常见,包括格式化日期、添加货币符号等;在 Vue2 中使用过滤器也比较简单,容易上手,稍微来总结一下 Vue2 中过滤器的使用;
- 全局过滤器;
// main.js
Vue.filter('dateFormat', function (value) {
// ...
return newValue
})
- 组件过滤器;
// xxx.vue
export default {
filters: {
dateFormat: function (value) {
// ...
return newValue
}
}
}
在组件中使用
<template>
<div>
<span>{{ date | dateFormat }}</span>
</div>
</template>
在 Vue2 中过滤器可以串联使用,每个过滤器接收的值都是前面返回的值,例如:
{{ date | dateFormat | dateFormat1 }}
当然,过滤器也可以进行传参,我们稍微改造一下:
// main.js
Vue.filter('dateFormat', function (value, format = 'yyyy-MM-dd hh:mm:ss') {
switch (format) {
// ...
}
return newValue
})
<!--
这里的过滤器需要传入两个参数,第一个参数默认是需要过滤的值,这里也就是 date,第二个参数是我们自己传进去的值,这里是'yyyy-MM-dd hh:mm:ss'
-->
<span>{{ date | dateFormat('yyyy-MM-dd hh:mm:ss') }}</span>
总结完 Vue2 的过滤器,我们再来看看 Vue3 中的过滤器,从官网文档来看,Vue3 中是移除了过滤器,官方比较推荐我们使用 computed
或者 method
来替换过滤器;
当然,也不是说我们完全不能使用过滤器,我们可以在全局实例对象上进行挂载,然后通过 $filters
直接调用或者获取过滤器再进行调用;
// main.js
app.config.globalProperties.$filters = {
dateFormat: function (value) {
// ...
return newValue
}
}
<template>
<!-- 方式一 -->
<span>{{ $filters.dateFormat(date) }}</span>
<!-- 方式二 -->
<span>{{ dateFormat(date) }}</span>
</template>
<script setup>
import { getCurrentInstance } from 'vue'
const { dateFormat } = getCurrentInstance().appContext.config.globalProperties.$filters
</script>