Vue 过滤器用法

官方介绍

传送门

使用场景

想象一个场景，后端给你返回一个时间戳，需要前端处理成（yyy-mm-dd)格式的日期，第一种情况，欸，后端老哥，你这返回能不能处理好给我啊；第二种，接口获取到时间戳初始化的时间自己处理下。

局部使用

// html
<view class="info_item">
	<view class="item_title" style='width:120px'>证件有效期止期</view>
	<view class="item_content">{{claimInsuredDto.persionCertificateValidity | dateFilter}}/view>
</view>


// script (和 methods 同级别)
  filters:{
  		 dateFilter (time) {
  			if (!time) { 	//当时间是null或者无效格式时返回空
  				return ' '
  			} else {
  				const timeLen = time.length;  //传入的时候时间戳类型应为字符串，因为要根据length判断是10/13的时间戳
  				const oneDate = new Date(parseInt(time) * 1000); // 10位时间戳
  				const twoDate = new Date(parseInt(time)); // 13位时间戳
  				const date = timeLen == 10 ? oneDate : twoDate; 
  				const dateNumFun = (num) => num < 10 ? `0${num}` : num 
  				console.log(time)
  				const [Y, M, D, h, m, s] = [
  					date.getFullYear(),
  					dateNumFun(date.getMonth() + 1),
  					dateNumFun(date.getDate()),
  					dateNumFun(date.getHours()),
  					dateNumFun(date.getMinutes()),
  				]
  				return `${Y}-${M}-${D}` 
  			}
  		}
  	
  	},
  

全局使用

main.js 中写。（或者是封装成js库，在main.js中引入）

Vue.filter('pricefilter', function (value) {
  return "¥" + value;
})