【vue filters 过滤器】vue页面局部使用，姓名只展示第一个字，其他用 * 代替，手机号中间四位星号代替，过滤器处理价格，kb mb 文件大小之间的转换，获取未来day天的每一天

本文链接：https://blog.csdn.net/AAAXiaoApple/article/details/125197815

filter过滤器的局部用法
使用

<template>
   {{ id | datalist }}
      <!-- id是 filters 里的 case -->
      <!-- datalist 是 filters 里的 datalist 方法-->
</template>

 methds：{ }，
 filters: {
 // 过滤器名称
    datalist(val) {
      let result = null
      switch (val) {
        case '1':
          return (result = '党政军')
          break
        case '2':
          return (result = '民生')
          break
        case '13':
          return (result = '其他')
          break
      }
      return result
    },
  },

<view class="all">合计：<text class="fee"> ￥{{detail.confirm_pay_price | tofixed }} </text> </view>

filters: {
	// 把数字处理为带两位小数点的数字
	tofixed(num) {
		return Number(num).toFixed(2)
	}，
	// 处理数字 为 每三位 加一个逗号 14444 转为 14，444
	toreg(val) {
		return val.replace(/\B(?=(?:\d{3})+\b)/g, ',')
	}
},

filters: {
   // 过滤器处理价格
   currency(val) {
     if (!val) return '0.00';
     return '￥' + Number(val).toFixed(2) + '元';
   }
 },
  // kb mb 文件大小之间的转换
   filterType(val){
     if(val === 0) return "0 B"
       var k = 1024;
       var sizes = ['B','KB','MB','GB','PB','TB','EB','ZB','YB'],
       i = Math.floor(Math.log(val) / Math.log(k));
       return (val / Math.pow(k,i)).toPrecision(3) + "" + sizes[i]
   },
   
// 姓名只展示 第一个字，其他用 * 代替
 formattedName(val){
	return val.substring(0,1) + new Array(val.length).join('*')
 }，
// 手机号 中间 四位 星号 代替
formattedPhone(val){
	return val.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
},
//  import resetTime from "@/util/check.js";
// timeago 是check.js 文件里的某一个方法
 // 时间 2023-04-20 转为 时间戳 再转为 （时间表现为，刚刚，几个小时前，几个月前 类似这种）
  fifterTime(value) {
	let time = value ? value.replace(/-/g, '/') : '';
	if (time) {
		return resetTime.timeago(new Date(time).getTime());
	}
},

util/check.js 文件内容

var dayjs = require('dayjs');
// dayjs.locale('zh-cn');

async function phone(number) {
	var reg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/;
	if (number == '' || !reg.test(number)) {
		return false;
	} else {
		return true;
	}
}

function timeago(dateTimeStamp) {
	// dateTimeStamp 时间戳
	var minute = 1000 * 60; //把分，时，天，周，半个月，一个月用毫秒表示
	var hour = minute * 60;
	var day = hour * 24;
	var week = day * 7;
	// var halfamonth = day * 15;
	var month = day * 30;
	var now = new Date().getTime(); //获取当前时间毫秒
	var diffValue = now - dateTimeStamp; //时间差

	if (diffValue < 0) {
		return;
	}
	var minC = diffValue / minute; //计算时间差的分，时，天，周，月
	var hourC = diffValue / hour;
	var dayC = diffValue / day;
	var weekC = diffValue / week;
	var monthC = diffValue / month;
	var result = "";
	if (monthC >= 1 && monthC <= 3) {
		result = parseInt(monthC) + "月前"
	} else if (weekC >= 1 && weekC <= 3) {
		result = parseInt(weekC) + "周前"
	} else if (dayC >= 1 && dayC <= 6) {
		result = parseInt(dayC) + "天前"
	} else if (hourC >= 1 && hourC <= 23) {
		result = parseInt(hourC) + "小时前"
	} else if (minC >= 1 && minC <= 59) {
		result = parseInt(minC) + "分钟前"
	} else if (diffValue >= 0 && diffValue <= minute) {
		result = "刚刚"
	} else {
		var datetime = new Date();
		datetime.setTime(dateTimeStamp);
		console.log(datetime)
		var Nyear = datetime.getFullYear();
		var Nmonth = addZeroPrefix(datetime.getMonth() + 1);
		var Ndate = addZeroPrefix(datetime.getDate());
		// var Nhour = addZeroPrefix(datetime.getHours());
		// var Nminute = addZeroPrefix(datetime.getMinutes());
		// var Nsecond = addZeroPrefix(datetime.getSeconds());
		result = Nyear + "-" + Nmonth + "-" + Ndate
	}
	return result;
}

function humandate(time1, time2) {
	time1 = time1 / 1000;
	time2 = time2 / 1000;
	var s = time1 - time2;
	if (s < 0) {
		s = Math.abs(s);
	}
	if (s > 2592000) {
		return (s / 2592000).toFixed(2) + '月';
	} else if (s > 86400) {
		return (s / 86400).toFixed(2) + '天';
	} else if (s > 3600) {
		return (s / 3600).toFixed(2) + '小时';
	} else if (s > 60) {
		return (s / 60).toFixed(2) + '分钟';
	} else {
		return (s) + '秒';
	}
}
//时间戳转换方法    date:时间戳数字
// function formatDate(date) {
	// var date = new Date(date);
	// var YY = date.getFullYear() + '-';
	// var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
	// var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
	// var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
	// var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
	// var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
	// return YY + MM + DD + " " + hh + mm + ss;
// }

function getDay(day) {
	// 获取未来day天的每一天
	var betweentDay = [];
	for (let i = 1; i <= day; i++) {
		let dd = new Date();
		dd.setDate(dd.getDate() + i);
		let y = dd.getFullYear();
		let m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
		let d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
		betweentDay.push({
			value: y + '-' + m + '-' + d,
			label: y + '-' + m + '-' + d
		})
	}
	return betweentDay;
}
function formatTime (date) {
  if (isToday(date)) {
    return dayjs(date).format('A HH:mm').replace('PM', '下午').replace('AM', '上午')
  }
  return getDates(date)
}
function isToday (date) {
  return date.toDateString() === new Date().toDateString()
}
function getDates(date, splitor = '/') {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  return `${year}${splitor}${addZeroPrefix(month)}${splitor}${addZeroPrefix(day)}`
}
/**
 * 个位数，加0前缀
 * @param {*} number
 * @returns
 */
function addZeroPrefix (number) {
  return number < 10 ? `0${number}` : number
}
module.exports = {
	formatTime,
	phone,
	timeago,
	humandate,
	getDay
}