vue全局过滤器的使用

1、在src目录下创建 filters.js

2、filters.js文件代码如下：

const goodFlls = (value) => { //  商品状态过滤,value值就是需要过滤的值
	if (value == "1") {
		return "待发货";
	}
	if (value == "2") {
		return "已发货";
	}
	if (value == "3") {
		return "待收货";
	}
}

export {
	goodFlls //通过此处导出方法
}

3、在main.js里引入全局过滤器

import * as filters from './filters/filters.js'
Object.keys(filters).forEach(key => { //遍历filters.js内的方法
  Vue.filter(key, filters[key])
})

4、在组件里使用

<template>
	<div class="home">
		<div class="box">
			<div v-for="(item, i) in arr" :key="i">
				{{ item.status | goodFils }}
				<!-- 组件内部直接通过 | 方法名即可完成过滤 -->
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'Home',
	data() {
		return {
			arr: [
				{
					status: '1'
				},
				{
					status: '4'
				},
				{
					status: '2'
				},
				{
					status: '3'
				}
			]
		};
	}
};
</script>

<style lang="scss" scoped=""></style>