vue filter -- 案例合集

默认两位小数

Vue.filter('priceFixed', function (price) {
	let num = '';
	if (price == 0) num = 0;
	if (!price) return num;
	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

时间相隔

Vue.filter('remainTime', function ([stamp, fmt]) {
	return stampToMinutes(stamp, fmt);
});
const stampToMinutes = (stamp, fmt) => {
	let text = '';
	if (fmt == 'mm') text = parseInt(stamp / 60 / 1000);
	if (fmt == 'hh') text = parseInt(stamp / 60 / 1000 / 60);
	return Math.abs(text);
};
// === template
<span>{{ ['2022-02-01 12:12:12' - Date.now(),'mm'] | priceFixed }}分钟</span>

// 输出 2 分钟

格式化时间格式

Vue.filter('formatDate', function([value, fmt]) {
	if (!value) return '';
	return new Date(value).format(fmt);
});
// === template
<span>{{ [Date.now(), "yyyy-MM-dd HH:mm:ss"] | formatDate }}</span>

输出结果: 2022-02-01 12:00:00

适配 IOS 的格式化时间格式

Vue.filter('formatIpadDate', function([value, fmt]) {
	if (!value) return '';
	// splitIosTime 函数  请查看 js 快捷实现
	return new Date(splitIosTime(value)).format(fmt);
});
// === template
<span>{{ [Date.now(), "yyyy-MM-dd HH:mm:ss"] | formatIpadDate }}</span>

输出结果: 2022-02-01 12:00:00

根据传入设置位数四舍五入

Vue.filter('decimalPoint', function ([price, point = 1]) {
	let num = '';
	if (price == 0) num = 0;
	if (!price) return num;
	let notNumber = isNaN(Number(price));
	if (!notNumber) num = Number(price).toFixed(point);
	else num = price;
	return num;
});

// === template
<span>{{ [12.2232123, 0] | decimalPoint }}</span>

输出结果: 12