Vue中filters过滤器的封装

babyxuqian

已于 2022-07-15 10:32:07 修改

阅读量1.7k

点赞数 3

分类专栏： vue 文章标签：过滤器 vue filter javascript js

于 2021-08-02 14:55:03 首次发布

本文链接：https://blog.csdn.net/babyxuqian/article/details/119324717

版权

vue 专栏收录该内容

18 篇文章 2 订阅

订阅专栏

Vue中的filters过滤器是什么？

Vue中为什么要封装filters过滤器

封装准备开始：如何封装一个全局的filters过滤器：

Vue中的filters过滤器是什么？

在vue中过滤器实质上是对文本进行格式化，在渲染前对数据进行处理和筛选。

语法格式：

<h1>{{data | filter(参数)}}</h1>

注意：

1.当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！

2.一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右

Vue中为什么要封装filters过滤器

如果有过多的页面要使用同一个或者多个过滤器时，为了避免反复拷贝黏贴，造成n个版本的代码，从而使代码维护异常困难，增大服务器端的压力。

封装准备开始：
如何封装一个全局的filters过滤器：

1.新建一个文件夹名字叫filters，然后在里面在新建一个filters.js

在filters.js中写

例子

export function nameFilters(name) {  //对名字进行过滤    张三（*三）  张某某（张*某）

  if (typeof(name) == "undefined") {

    return name;

  } else if (name.length < 2) {

    return name;

  } else if (name.length === 2) {

    return new Array(name.length).join("*") + name.substr(-1);

  } else {

    return (

      name.substr(0, 1) + new Array(name.length - 1).join("*") + name.substr(-1)

    );

  }

}


export function idCardFilters(num) {   //身份证进行过滤  429004199902024125（42900419********25）

  if (typeof(num) == "undefined") {

    return num;

  } else if (num.length != 18) {

    return num;

  } else {

    return num.replace(/(\d{8})\d{8}(\d*)/, "$1********$2");

  }

}


export function sexIdcareFilter(num) {   //根据身份证判断性别

  if (typeof(num) == "undefined") {

    return num;

  } else if (num.length != 18) {

    return num;

  } else {

    return num.substr(16, 1) % 2 === 1 ? "男" : "女";

  }

}


export function phoneFilters(num) {   //手机号码进行过滤  18641526389  （186****6389）

  if (typeof(num) == "undefined") {

    return num;

  } else if (num.length != 11) {

    return num;

  } else {

    return num.replace(/(\d{3})\d{4}(\d*)/, "$1****$2");

  }

}


export function textFilter(type, n) {   //文本超出后截取

    if (typeof(type) == 'undefined' || type.length <= n) {

        return type

    } else {

       if (type.length > n) {

           return type.substr(0, n) + '...'

        }

    }

}



export function priceFilter(type, n) {    //保留两位小数

	if (typeof(type) == 'undefined') {

		return type

	} else {

		return "￥" + type.toFixed(n)

   }

}



export function timeFilters(type) {   //时间

      var time = new Date(type);

      var year = time.getFullYear(); //年

      var month = (time.getMonth() + 1 + "").padStart(2, "0"); //月

      var date = (time.getDate() + "").padStart(2, "0"); //日

      var hour = (time.getHours() + "").padStart(2, "0"); //时

      var minutes = (time.getMinutes() + "").padStart(2, "0"); //分

      var seconds = (time.getSeconds() + "").padStart(2, "0"); //秒

      return `${year}-${month}-${date} ${hour}:${minutes}:${seconds}`;

}

2.在main.js中引用

import * as filters from './filters/filters.js'      //引入写好的filters文件
//全局过滤器
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

3.直接到页面中用
例子

<template>

  <h1>{{ title |  textFilter}}</h1>

</template>

后续扩展

(1).Vue获取当前时间以及星期几

<template>
	<div class="text">
		{{time}}--{{week}}
	</div>
</template>

<script>
	export default {
		data() {
			return {
				time: '',  //日期
				week: ''   //星期几
			}
		},
		methods: {
			getTime() {
				var time = new Date();
				var wk = time.getDay()
				var year = time.getFullYear(); //年
				var month = (time.getMonth() + 1 + "").padStart(2, "0"); //月
				var date = (time.getDate() + "").padStart(2, "0"); //日
				var hour = (time.getHours() + "").padStart(2, "0"); //时
				var minutes = (time.getMinutes() + "").padStart(2, "0"); //分
				var seconds = (time.getSeconds() + "").padStart(2, "0"); //秒
				var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
				this.week = weeks[wk]
				this.time = `${year}年${month}月${date}日 ${hour}时${minutes}分${seconds}秒`;
			}
		},
		mounted() {
			this.getTime()
			setInterval(() => {
				this.getTime()
			}, 1000)
		}
	}
</script>

(2).Vue获取当前时间的星期一到星期天

<template>
	<div>
		<h1>星期一{{month.MondayTime}}</h1>
		<h1>星期二{{month.TuesdayTime}}</h1>
		<h1>星期三{{month.WednesdayTime}}</h1>
		<h1>星期四{{month.ThursdayTime}}</h1>
		<h1>星期五{{month.FridayTime}}</h1>
		<h1>星期六{{month.SaturdayTime}}</h1>
		<h1>星期日{{month.SundayTime}}</h1>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				month: {
					MondayTime: null,
					TuesdayTime: null,
					WednesdayTime: null,
					ThursdayTime: null,
					FridayTime: null,
					SaturdayTime: null,
					SundayTime: null
				}
			};
		},
		mounted() {
			this.weekCheckingIn()
		},
		methods: {
			weekCheckingIn() {
				var now = new Date();
				var nowTime = now.getTime();
				var day = now.getDay() || 7; // 不加 || 7.周末会变成下周一
				var oneDayTime = 24 * 60 * 60 * 1000;
				var MondayTime = nowTime - (day - 1) * oneDayTime; //显示周一
				var TuesdayTime = nowTime - (day - 2) * oneDayTime; //显示周二
				var WednesdayTime = nowTime - (day - 3) * oneDayTime; //显示周三
				var ThursdayTime = nowTime - (day - 4) * oneDayTime; //显示周四
				var FridayTime = nowTime - (day - 5) * oneDayTime; //显示周五
				var SaturdayTime = nowTime - (day - 6) * oneDayTime; //显示周六
				var SundayTime = nowTime + (7 - day) * oneDayTime; //显示周日
				//调用方法
				this.month.MondayTime = this.formatDate(new Date(MondayTime))
				this.month.TuesdayTime = this.formatDate(new Date(TuesdayTime))
				this.month.WednesdayTime = this.formatDate(new Date(WednesdayTime))
				this.month.ThursdayTime = this.formatDate(new Date(ThursdayTime))
				this.month.FridayTime = this.formatDate(new Date(FridayTime))
				this.month.SaturdayTime = this.formatDate(new Date(SaturdayTime))
				this.month.SundayTime = this.formatDate(new Date(SundayTime))
			},

			//格式化日期：yyyy-MM-dd
			formatDate(date) {
				var myyear = date.getFullYear();
				var mymonth = date.getMonth() + 1;
				var myweekday = date.getDate();

				if (mymonth < 10) {
					mymonth = "0" + mymonth;
				}
				if (myweekday < 10) {
					myweekday = "0" + myweekday;
				}
				return (myyear + "-" + mymonth + "-" + myweekday);
			}
		},
	};
</script>

(3).Vue中实现上一周下一周的切换

<template>
	<div class="tabox">
		<div class="hand">
			<button @click="lastclick" size="mini">上一周</button>
			<button @click="presentclick" size="mini">本周</button>
			<button @click="nextclick" size="mini">下一周</button>
		</div>
		<div>
			<span>当天星期几:{{ todayDate }}</span>
		</div>
		<div class="list">
			<span v-for="(item, index) in weekDayArr" :key="index">{{
        item.adate
      }}</span>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				currentFirstDate: "",
				clen: 7,
				todayDate: "",
				weekDayArr: [],
			};
		},
		created() {
			this.todayDate = this.formatDate(new Date());
			this.setDate(new Date());
		},
		methods: {
			// 日期格式处理
			formatDate(date) {
				var year = date.getFullYear(); //年
				var month = (date.getMonth() + 1 + "").padStart(2, "0"); //月
				var day = (date.getDate() + "").padStart(2, "0"); //日
				var week = "(" + ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"][date.getDay()] + ")";
				return `${year}-${month}-${day} ${week}`;
			},
			addDate(date, n) {
				date.setDate(date.getDate() + n);
				return date;
			},
			setDate(date) {
				var week = date.getDay() - 1;
				date = this.addDate(date, week * -1);
				this.currentFirstDate = new Date(date);
				for (var i = 0; i < this.clen; i++) {
					this.weekDayArr.push({
						adate: this.formatDate(i == 0 ? date : this.addDate(date, 1)),
					});
				}
			},
			//本周
			presentclick() {
				this.weekDayArr = [];
				this.setDate(new Date());
			},
			//上一周
			lastclick() {
				this.weekDayArr = [];
				this.setDate(this.addDate(this.currentFirstDate, -7));
			},
			//下一周
			nextclick() {
				this.weekDayArr = [];
				this.setDate(this.addDate(this.currentFirstDate, 7));
			},
		},
	};
</script>

<style scoped>
	.hand {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tabox span {
		font-size: 20px;
		color: #222;
		line-height: 40px;
		letter-spacing: 2px;
		display: block;
		font-family: "宋体";
	}
</style>

(4).Vue对时间进行二次复用

1.新建一个time-week.js文件

var time = new Date();
var weekNew = time.getDay()
var year = time.getFullYear(); //年
var month = (time.getMonth() + 1 + "").padStart(2, "0"); //月
var date = (time.getDate() + "").padStart(2, "0"); //日
var hour = (time.getHours() + "").padStart(2, "0"); //时
var minutes = (time.getMinutes() + "").padStart(2, "0"); //分
var seconds = (time.getSeconds() + "").padStart(2, "0"); //秒
var weekList = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
var week = weekList[weekNew]
export default {
	year, //年
	month, //月
	date, //日
	hour, //时
	minutes, //分
	seconds, //秒
	week //星期
}

2.在页面中进行引用

<template>
	<view>
		{{timer.year}}-{{timer.month}}-{{timer.date}}
		{{timer.week}}
	</view>
</template>

<script>
	import dateAndTime from "./time-week.js";
	export default {
		data() {
			return {
				timer: {
					year: dateAndTime.year, //年
					month: dateAndTime.month, //月
					date: dateAndTime.date, //日
					hour: dateAndTime.hour, //时
					minutes: dateAndTime.minutes, //分
					seconds: dateAndTime.seconds, //秒
					week: dateAndTime.week //星期
				}
			}
		},
		mounted() {
			console.log(this.timer.year, this.timer.month, this.timer.date, this.timer.hour, this.timer.minutes, this.timer
				.seconds, this.timer.week)
		}
	}
</script>

babyxuqian

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Vue中filters过滤器的封装

封装filters：1.在main.js中引用import * as filters from './filters/filters.js' // ./filters/filters.js//全局过滤器Object.keys(filters).forEach(key => { Vue.filter(key, filters[key])})2.新建一个文件夹名字叫filters，然后在里面在新建一个filters.js在filters.js中写例子expor......
复制链接

扫一扫