实现的效果:
将所有的全局过滤器方法都放在filter.js文件中,在main.js进行全局注册,在其他vue组件中直接使用。
过滤器filters通常用来过滤一些状态为自己想要的形式,比如后台返回status
// num等于0, 1, 2
// 对应的状态 0:小甲鱼, 1: 带鱼, 2:美人鱼
status: num
这个时候过滤器就很方便了,如果只在某一个组件有这个状态,那直接在当前组件写个过滤器方法就行,如果在多个组件都用到这个状态,那么最好的方式就是将这个过滤器定义为全局过滤器,供多个组件通用,减少代码冗余度
直接上代码:
1、新建一个filters.js文件,内容如下:
const filters = {
// 状态过滤器, 将数字0,1,2转化为对应文字状态
// 状态(0:小甲鱼, 1: 带鱼, 2:美人鱼)
deliverStatusFilter: function (val) {
if (val == 0) {
return '小甲鱼'
} else if (val == 1) {
return '带鱼'
} else if (val == 2) {
return '美人鱼'
} else {
console.log(val);
}
},
timeFilter: function (time) {
// 第二个过滤器
}
// 多个过滤器直接依次写在这里即可
}
export default filters
2、在main.js中注册为全局路由器
import Vue from 'vue'
import filters from './util/filters.js'
// 这种方式可以将filters.js中的所有过滤器都注册
for (let key in filters) {
Vue.filter(key, filters[key])
}
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
3、在组件中引用
<template>
<div>
<p>不加过滤器:{{status}}</p>
<p>加过滤器后:{{status | deliverStatusFilter}}</p>
</div>
</template>
<script>
export default {
data () {
return {
status: 0
}
}
}
</script>
展示效果: