过滤器:将指定的数据,按照一套流程过滤加工,最后返回一个过滤之后的值
-
注册局部过滤器
将过滤器写在filters配置项中的是局部过滤器,只供该vue匹配的容器使用new Vue({ el: '#root', data: function(){ return { time: 1670297916166 } }, filters: { dateFormat(value, str = 'YYYY-MM-DD') { return dayjs(value).format(str); } } });
-
注册全局过滤器
利用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 } } });
-
使用场景
一般在插值表达式、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>
-
多个过滤器可串联使用
<p>串联:{{time | dateFormat('YYYY-MM-DD HH:mm:ss') | addChar('$')}}</p>