Vue中自定义过滤器

虽然VueJs给我们提供了很多强有力的过滤器，但有时候还是不够。值得庆幸的，Vue给我们提供了一个
干净简洁的方式来定义我们自己的过滤器，之后我们就可以利用管道 “ | ” 来完成过滤。
定义一个全局的自定义过滤器，需要使用 Vue.filter() 构造器。这个构造器需要两个参数。

// 定义一个全局过滤器
Vue.filter('dataFormat', function (input, pattern = '') {
	var dt = new Date(input);
	// 获取年月日
	var y = dt.getFullYear();
	var m = (dt.getMonth() + 1).toString().padStart(2, '0');
	var d = dt.getDate().toString().padStart(2, '0');
	// 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日
	// 否则，就返回 年-月-日 时：分：秒
	if (pattern.toLowerCase() === 'yyyy-mm-dd') {
		return `${y}-${m}-${d}`;
	} else {
		// 获取时分秒
		var hh = dt.getHours().toString().padStart(2, '0');
		var mm = dt.getMinutes().toString().padStart(2, '0');
		var ss = dt.getSeconds().toString().padStart(2, '0');
		return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
	}
});

自定义私有过滤器

filters: { // 私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用
	dataFormat(input, pattern = "") { // 在参数列表中 通过 pattern="" 来指定形参默认值，防止报错
		var dt = new Date(input);
		// 获取年月日
		var y = dt.getFullYear();
		var m = (dt.getMonth() + 1).toString().padStart(2, '0');
		var d = dt.getDate().toString().padStart(2, '0');
		// 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日
		// 否则，就返回 年-月-日 时：分：秒
		if (pattern.toLowerCase() === 'yyyy-mm-dd') {
			return `${y}-${m}-${d}`;
		} else {
			// 获取时分秒
			var hh = dt.getHours().toString().padStart(2, '0');
			var mm = dt.getMinutes().toString().padStart(2, '0');
			var ss = dt.getSeconds().toString().padStart(2, '0');
			return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
		}
	}
}