vue项目中的过滤器使用, ⼗个常⽤的⾃定义过滤器

最新推荐文章于 2024-10-30 19:10:39 发布

前端菜鸟--LKX

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量99

点赞数

分类专栏： Vue.js 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/lkx_20201106/article/details/114551899

版权

Vue.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文档展示了如何在Vue.js应用中创建和使用自定义过滤器，如`filterOne`和`trim`，用于数值增加和字符串空格处理。同时，详细介绍了日期格式化过滤器`formaDate`，支持多种日期格式。通过导入和注册过滤器，可以在.vue组件中便捷地应用这些功能。

摘要由CSDN通过智能技术生成

filter/filter.js：
这个⽂件主要是写了过滤器实现的⽅法，然后export进⾏导出。

function filterOne(n){
 	return n + 10; 
 }
function filterTwo(n){
 	return n + 5; 
 }
export{
 	filterOne,
 	filterTwo
}

main.js：
// 找 filter/filter.js

import * as filters from './filter/filter.js'

//遍历所有导出的过滤器并添加到全局过滤器

Object.keys(filters).forEach((key) => {
 	Vue.filter(key, filters[key]);
})

在 .vue 组件下使⽤

{{test | filterOne}}

在 .vue 组件中的使⽤示例：

{{ string | trim(1) }} //去除所有空格，过滤器第⼀个参数为value

常⽤的过滤器，filter/filter.js
//去除空格 type 1-所有空格 2-前后空格 3-前空格 4-后空格

function trim(value, trim) {
 	switch (trim) {
 			case 1:
 				return value.replace(/\s+/g, "");
 			case 2:
 				return value.replace(/(^\s*)|(\s*$)/g,"");
 			case 3:
 				return value.replace(/(^\s*)/g, "");
 			case 4:
 				return value.replace(/(\s*$)/g, "");
 			default:
 				return value;
 	} 
 }

任意格式⽇期处理

//使⽤格式：
// {{ '2018-09-14 01:05' | formaDate(yyyy-MM-dd 
hh:mm:ss) }} 
// {{ '2018-09-14 01:05' | formaDate(yyyy-MM-dd) }} 
// {{ '2018-09-14 01:05' | formaDate(MM/dd) }} 等
function formaDate(value, fmt) {
 var date = new Date(value);
 var o = {
 	"M+": date.getMonth() + 1, //⽉份
 	"d+": date.getDate(), //⽇
 	"h+": date.getHours(), //⼩时
 	"m+": date.getMinutes(), //分
 	"s+": date.getSeconds(), //秒
 	"w+": date.getDay(), //星期
 	"q+": Math.floor((date.getMonth() + 3) / 3), //
	季度
 	"S": date.getMilliseconds() //毫秒
 };
 if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp. $1, (date.getFullYear() + "").substr(4 - RegExp. $1.length));
 for (var k in o) {
 	if(k === 'w+') {
 	if(o[k] === 0) {
 	fmt = fmt.replace('w', '周⽇');
 	}else if(o[k] === 1) {
 	fmt = fmt.replace('w', '周⼀');
 	}else if(o[k] === 2) {
 	fmt = fmt.replace('w', '周⼆');
 	}else if(o[k] === 3) {
 	fmt = fmt.replace('w', '周三');
 	}else if(o[k] === 4) {
 	fmt = fmt.replace('w', '周四');
 	}else if(o[k] === 5) {
 	fmt = fmt.replace('w', '周五');
 	}else if(o[k] === 6) {
 	fmt = fmt.replace('w', '周六');
 	}
 }else if (new RegExp("(" + k + ")").test(fmt))
{
 fmt = fmt.replace(RegExp.$1, (RegExp. $1.length == 1) ? (o[k]) : (("00" + o[k]).substr((""
+ o[k]).length)));
 }
 }
 return fmt;
 }