Vue中的过滤器（管道）

过滤器：将指定的数据，按照一套流程过滤加工，最后返回一个过滤之后的值

1. 注册局部过滤器
   将过滤器写在filters配置项中的是局部过滤器，只供该vue匹配的容器使用

   new Vue({
   	el: '#root',
   	data: function(){
   		return {
   			time: 1670297916166
   		}
   	},
   	filters: {
   		dateFormat(value, str = 'YYYY-MM-DD') {
   			return dayjs(value).format(str);
   		}
   	}
   });
   

2. 注册全局过滤器
   利用Vue.filter()声明的过滤器是全局过滤器，为所有vue实例共享，必须写在vue实例声明之前

   Vue.filter('dateFormat', function (value, str = 'YYYY-MM-DD') {
   	return dayjs(value).format(str);
   });
   Vue.filter('addChar', function (value, str = '#') {
   	return str + value;
   });
   new Vue({
   	el: '#root',
   	data: function(){
   		return {
   			time: 1670297916166
   		}
   	}
   });
   

3. 使用场景
   一般在插值表达式、v-bind中使用

   <!-- 插值表达式 -->
   <p>不传参数：{{time | dateFormat}}</p>
   <p>传入自定义格式：{{time | dateFormat('YYYY-MM-DD HH:mm:ss')}}</p>
   

   

   <!-- v-bind -->
   <p :title="time | dateFormat">不传参数</p>
   <p :title="time | dateFormat('YYYY-MM-DD HH:mm:ss')">传入自定义格式</p>
   

   

4. 多个过滤器可串联使用

   <p>串联：{{time | dateFormat('YYYY-MM-DD HH:mm:ss') | addChar('$')}}</p>