vue filter -- 自定义过滤器

前言

你可能不知道 filter, 但你知道过滤器, 为啥要用 filter, 让他永世长眠不好么? 但显示往往事不遂人愿 在以往的开发中, 你是否会经常写出这样的代码

// 为了使用某个公用的函数, 需要专门调用一次
<template>
	<div>{{ getPayTypeName(baseInfo.payType) }}</div>
</template>
<script>
import { getTypeName } from '@u/common';
export default {
	methods: {
		getTypeName(e) {
			return getTypeName(e);
		},
	},
};
</script>

// 是否专门为了时间加载而重做加载逻辑
<template>
	<div>{{ FormateDate(baseInfo.date, 'yyyy-MM-dd') }}</div>
</template>
<script>
import { FormateDate } from '@u/common';
export default {
	methods: {
		FormateDate(e, foramt) {
			let date = e;
			if (e) date = new Date(e);
			return FormateDate(date, foramt);
		},
	},
};
</script>

其实, 这些都是错误的写法, 简简单单, 一键完成, 不需要别人的安排和布置, 这是高度代码的核心

解决场景

1. 需要在组件中引用之后, 还需要声明之后 才能使用
2. 需要在每个地方专门处理一遍格式才能使用
3. 加快 dom 加载速度, 不予要重复调用 js

抒写方式

import Vue from 'vue';
/**
 * 数字格式化 -- 2位小数
 */
Vue.filter('priceFixed', function(price) {
    let num = '';
	if (price == 0) num = 0;
	if (price) {
        let notNumber = isNaN(Number(price));
		if (!notNumber) num = Number(price).toFixed(2);
		else num = price;
	}
	return num;
});

// === template
<span>{{ 12.2 | priceFixed }}</span>

输出结果: 12.20

注意：

• 当前只是讲解其中一种, 最舒适用法的一种, 如需要了解更多, 请自行百度
• 道路千万条, 规范唯一条, 不拘泥, 你将无人能挡