devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue中filters过滤器的封装_vue的管道符过滤器封装

作者：凡人多烦事01 | 2024-02-16 19:25:18

赞

踩

vue的管道符过滤器封装

目录

Vue中的filters过滤器是什么？

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

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

Vue中的filters过滤器是什么？

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

语法格式：

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

注意：

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

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

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

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

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

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

在filters.js中写

例子

  1. export function nameFilters(name) {  //对名字进行过滤    张三（*三）  张某某（张*某）
  2.  
  3.   if (typeof(name) == "undefined") {
  4.  
  5.     return name;
  6.  
  7.   } else if (name.length < 2) {
  8.  
  9.     return name;
  10.  
  11.   } else if (name.length === 2) {
  12.  
  13.     return new Array(name.length).join("*") + name.substr(-1);
  14.  
  15.   } else {
  16.  
  17.     return (
  18.  
  19.       name.substr(0, 1) + new Array(name.length - 1).join("*") + name.substr(-1)
  20.  
  21.     );
  22.  
  23.   }
  24.  
  25. }
  26.  
  27.  
  28. export function idCardFilters(num) {   //身份证进行过滤  429004199902024125（42900419********25）
  29.  
  30.   if (typeof(num) == "undefined") {
  31.  
  32.     return num;
  33.  
  34.   } else if (num.length != 18) {
  35.  
  36.     return num;
  37.  
  38.   } else {
  39.  
  40.     return num.replace(/(\d{8})\d{8}(\d*)/, "$1********$2");
  41.  
  42.   }
  43.  
  44. }
  45.  
  46.  
  47. export function sexIdcareFilter(num) {   //根据身份证判断性别
  48.  
  49.   if (typeof(num) == "undefined") {
  50.  
  51.     return num;
  52.  
  53.   } else if (num.length != 18) {
  54.  
  55.     return num;
  56.  
  57.   } else {
  58.  
  59.     return num.substr(16, 1) % 2 === 1 ? "男" : "女";
  60.  
  61.   }
  62.  
  63. }
  64.  
  65.  
  66. export function phoneFilters(num) {   //手机号码进行过滤  18641526389  （186****6389）
  67.  
  68.   if (typeof(num) == "undefined") {
  69.  
  70.     return num;
  71.  
  72.   } else if (num.length != 11) {
  73.  
  74.     return num;
  75.  
  76.   } else {
  77.  
  78.     return num.replace(/(\d{3})\d{4}(\d*)/, "$1****$2");
  79.  
  80.   }
  81.  
  82. }
  83.  
  84.  
  85. export function textFilter(type, n) {   //文本超出后截取
  86.  
  87.     if (typeof(type) == 'undefined' || type.length <= n) {
  88.  
  89.         return type
  90.  
  91.     } else {
  92.  
  93.        if (type.length > n) {
  94.  
  95.            return type.substr(0, n) + '...'
  96.  
  97.         }
  98.  
  99.     }
  100.  
  101. }
  102.  
  103.  
  104.  
  105. export function priceFilter(type, n) {    //保留两位小数
  106.  
  107. 	if (typeof(type) == 'undefined') {
  108.  
  109. 		return type
  110.  
  111. 	} else {
  112.  
  113. 		return "￥" + type.toFixed(n)
  114.  
  115.    }
  116.  
  117. }
  118.  
  119.  
  120.  
  121. export function timeFilters(type) {   //时间
  122.  
  123.       var time = new Date(type);
  124.  
  125.       var year = time.getFullYear(); //年
  126.  
  127.       var month = (time.getMonth() + 1 + "").padStart(2, "0"); //月
  128.  
  129.       var date = (time.getDate() + "").padStart(2, "0"); //日
  130.  
  131.       var hour = (time.getHours() + "").padStart(2, "0"); //时
  132.  
  133.       var minutes = (time.getMinutes() + "").padStart(2, "0"); //分
  134.  
  135.       var seconds = (time.getSeconds() + "").padStart(2, "0"); //秒
  136.  
  137.       return `${year}-${month}-${date} ${hour}:${minutes}:${seconds}`;
  138.  
  139. }

2.在main.js中引用

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

3.直接到页面中用   
例子

  1. <template>
  2.  
  3.   <h1>{{ title |  textFilter}}</h1>
  4.  
  5. </template>

后续扩展 

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

  1. <template>
  2. 	<div class="text">
  3. 		{{time}}--{{week}}
  4. 	</div>
  5. </template>
  6.  
  7. <script>
  8. 	export default {
  9. 		data() {
  10. 			return {
  11. 				time: '',  //日期
  12. 				week: ''   //星期几
  13. 			}
  14. 		},
  15. 		methods: {
  16. 			getTime() {
  17. 				var time = new Date();
  18. 				var wk = time.getDay()
  19. 				var year = time.getFullYear(); //年
  20. 				var month = (time.getMonth() + 1 + "").padStart(2, "0"); //月
  21. 				var date = (time.getDate() + "").padStart(2, "0"); //日
  22. 				var hour = (time.getHours() + "").padStart(2, "0"); //时
  23. 				var minutes = (time.getMinutes() + "").padStart(2, "0"); //分
  24. 				var seconds = (time.getSeconds() + "").padStart(2, "0"); //秒
  25. 				var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  26. 				this.week = weeks[wk]
  27. 				this.time = `${year}年${month}月${date}日 ${hour}时${minutes}分${seconds}秒`;
  28. 			}
  29. 		},
  30. 		mounted() {
  31. 			this.getTime()
  32. 			setInterval(() => {
  33. 				this.getTime()
  34. 			}, 1000)
  35. 		}
  36. 	}
  37. </script>

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

  1. <template>
  2. 	<div>
  3. 		<h1>星期一{{month.MondayTime}}</h1>
  4. 		<h1>星期二{{month.TuesdayTime}}</h1>
  5. 		<h1>星期三{{month.WednesdayTime}}</h1>
  6. 		<h1>星期四{{month.ThursdayTime}}</h1>
  7. 		<h1>星期五{{month.FridayTime}}</h1>
  8. 		<h1>星期六{{month.SaturdayTime}}</h1>
  9. 		<h1>星期日{{month.SundayTime}}</h1>
  10. 	</div>
  11. </template>
  12.  
  13. <script>
  14. 	export default {
  15. 		data() {
  16. 			return {
  17. 				month: {
  18. 					MondayTime: null,
  19. 					TuesdayTime: null,
  20. 					WednesdayTime: null,
  21. 					ThursdayTime: null,
  22. 					FridayTime: null,
  23. 					SaturdayTime: null,
  24. 					SundayTime: null
  25. 				}
  26. 			};
  27. 		},
  28. 		mounted() {
  29. 			this.weekCheckingIn()
  30. 		},
  31. 		methods: {
  32. 			weekCheckingIn() {
  33. 				var now = new Date();
  34. 				var nowTime = now.getTime();
  35. 				var day = now.getDay() || 7; // 不加 || 7.周末会变成下周一
  36. 				var oneDayTime = 24 * 60 * 60 * 1000;
  37. 				var MondayTime = nowTime - (day - 1) * oneDayTime; //显示周一
  38. 				var TuesdayTime = nowTime - (day - 2) * oneDayTime; //显示周二
  39. 				var WednesdayTime = nowTime - (day - 3) * oneDayTime; //显示周三
  40. 				var ThursdayTime = nowTime - (day - 4) * oneDayTime; //显示周四
  41. 				var FridayTime = nowTime - (day - 5) * oneDayTime; //显示周五
  42. 				var SaturdayTime = nowTime - (day - 6) * oneDayTime; //显示周六
  43. 				var SundayTime = nowTime + (7 - day) * oneDayTime; //显示周日
  44. 				//调用方法
  45. 				this.month.MondayTime = this.formatDate(new Date(MondayTime))
  46. 				this.month.TuesdayTime = this.formatDate(new Date(TuesdayTime))
  47. 				this.month.WednesdayTime = this.formatDate(new Date(WednesdayTime))
  48. 				this.month.ThursdayTime = this.formatDate(new Date(ThursdayTime))
  49. 				this.month.FridayTime = this.formatDate(new Date(FridayTime))
  50. 				this.month.SaturdayTime = this.formatDate(new Date(SaturdayTime))
  51. 				this.month.SundayTime = this.formatDate(new Date(SundayTime))
  52. 			},
  53.  
  54. 			//格式化日期：yyyy-MM-dd
  55. 			formatDate(date) {
  56. 				var myyear = date.getFullYear();
  57. 				var mymonth = date.getMonth() + 1;
  58. 				var myweekday = date.getDate();
  59.  
  60. 				if (mymonth < 10) {
  61. 					mymonth = "0" + mymonth;
  62. 				}
  63. 				if (myweekday < 10) {
  64. 					myweekday = "0" + myweekday;
  65. 				}
  66. 				return (myyear + "-" + mymonth + "-" + myweekday);
  67. 			}
  68. 		},
  69. 	};
  70. </script>

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

  1. <template>
  2. 	<div class="tabox">
  3. 		<div class="hand">
  4. 			<button @click="lastclick" size="mini">上一周</button>
  5. 			<button @click="presentclick" size="mini">本周</button>
  6. 			<button @click="nextclick" size="mini">下一周</button>
  7. 		</div>
  8. 		<div>
  9. 			<span>当天星期几:{{ todayDate }}</span>
  10. 		</div>
  11. 		<div class="list">
  12. 			<span v-for="(item, index) in weekDayArr" :key="index">{{
  13.         item.adate
  14.       }}</span>
  15. 		</div>
  16. 	</div>
  17. </template>
  18. <script>
  19. 	export default {
  20. 		data() {
  21. 			return {
  22. 				currentFirstDate: "",
  23. 				clen: 7,
  24. 				todayDate: "",
  25. 				weekDayArr: [],
  26. 			};
  27. 		},
  28. 		created() {
  29. 			this.todayDate = this.formatDate(new Date());
  30. 			this.setDate(new Date());
  31. 		},
  32. 		methods: {
  33. 			// 日期格式处理
  34. 			formatDate(date) {
  35. 				var year = date.getFullYear(); //年
  36. 				var month = (date.getMonth() + 1 + "").padStart(2, "0"); //月
  37. 				var day = (date.getDate() + "").padStart(2, "0"); //日
  38. 				var week = "(" + ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"][date.getDay()] + ")";
  39. 				return `${year}-${month}-${day} ${week}`;
  40. 			},
  41. 			addDate(date, n) {
  42. 				date.setDate(date.getDate() + n);
  43. 				return date;
  44. 			},
  45. 			setDate(date) {
  46. 				var week = date.getDay() - 1;
  47. 				date = this.addDate(date, week * -1);
  48. 				this.currentFirstDate = new Date(date);
  49. 				for (var i = 0; i < this.clen; i++) {
  50. 					this.weekDayArr.push({
  51. 						adate: this.formatDate(i == 0 ? date : this.addDate(date, 1)),
  52. 					});
  53. 				}
  54. 			},
  55. 			//本周
  56. 			presentclick() {
  57. 				this.weekDayArr = [];
  58. 				this.setDate(new Date());
  59. 			},
  60. 			//上一周
  61. 			lastclick() {
  62. 				this.weekDayArr = [];
  63. 				this.setDate(this.addDate(this.currentFirstDate, -7));
  64. 			},
  65. 			//下一周
  66. 			nextclick() {
  67. 				this.weekDayArr = [];
  68. 				this.setDate(this.addDate(this.currentFirstDate, 7));
  69. 			},
  70. 		},
  71. 	};
  72. </script>
  73.  
  74. <style scoped>
  75. 	.hand {
  76. 		display: flex;
  77. 		align-items: center;
  78. 		justify-content: space-between;
  79. 	}
  80.  
  81. 	.tabox span {
  82. 		font-size: 20px;
  83. 		color: #222;
  84. 		line-height: 40px;
  85. 		letter-spacing: 2px;
  86. 		display: block;
  87. 		font-family: "宋体";
  88. 	}
  89. </style>

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

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

  1. var time = new Date();
  2. var weekNew = time.getDay()
  3. var year = time.getFullYear(); //年
  4. var month = (time.getMonth() + 1 + "").padStart(2, "0"); //月
  5. var date = (time.getDate() + "").padStart(2, "0"); //日
  6. var hour = (time.getHours() + "").padStart(2, "0"); //时
  7. var minutes = (time.getMinutes() + "").padStart(2, "0"); //分
  8. var seconds = (time.getSeconds() + "").padStart(2, "0"); //秒
  9. var weekList = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  10. var week = weekList[weekNew]
  11. export default {
  12. 	year, //年
  13. 	month, //月
  14. 	date, //日
  15. 	hour, //时
  16. 	minutes, //分
  17. 	seconds, //秒
  18. 	week //星期
  19. }

2.在页面中进行引用

  1. <template>
  2. 	<view>
  3. 		{{timer.year}}-{{timer.month}}-{{timer.date}}
  4. 		{{timer.week}}
  5. 	</view>
  6. </template>
  7.  
  8. <script>
  9. 	import dateAndTime from "./time-week.js";
  10. 	export default {
  11. 		data() {
  12. 			return {
  13. 				timer: {
  14. 					year: dateAndTime.year, //年
  15. 					month: dateAndTime.month, //月
  16. 					date: dateAndTime.date, //日
  17. 					hour: dateAndTime.hour, //时
  18. 					minutes: dateAndTime.minutes, //分
  19. 					seconds: dateAndTime.seconds, //秒
  20. 					week: dateAndTime.week //星期
  21. 				}
  22. 			}
  23. 		},
  24. 		mounted() {
  25. 			console.log(this.timer.year, this.timer.month, this.timer.date, this.timer.hour, this.timer.minutes, this.timer
  26. 				.seconds, this.timer.week)
  27. 		}
  28. 	}
  29. </script>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/96319
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号