1. 简介
- 用来过滤模型数据，在显示之前进行数据处理和筛选
- 语法：{{ data | filter1(参数) | filter2(参数)}}
2. 关于内置过滤器
- vue1.0中内置许多过滤器，如：currency、uppercase、lowercase、limitBy、orderBy、filterBy
- vue2.0中已经删除了所有内置过滤器，全部被废除
如何解决：
- a.使用第三方工具库，如lodash、date-fns日期格式化、accounting.js货币格式化等
- b.使用自定义过滤器
3. 自定义过滤器
分类：全局过滤器、局部过滤器
- 3.l 自定义全局过滤器
使用全局方法Vue.filter(过滤器ID,过滤器函数)
- 3.2 自定义局部过滤器
<script> /* 自定义全局过滤器 */ /* 个位数补0 */ Vue.filter('addZero',function(data){ return data<10?'0'+data:data; }); /* 保留几小数 四舍五入 toFixed方法不稳定*/ Vue.filter('number',(data,n) => { return data.toFixed(n); }) /* 日期的格式化处理 */ Vue.filter('date',data =>{ let d = new Date(data); return d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds(); }) window.onload=function(){ let app = new Vue({ el:'.container', data:{ currentTume:Date.now() }, filters:{ //局部过滤器 number:(data,n) => { return data.toFixed(n); } } }) } </script> <body> <div class="container"> <h3>{{ 8 | addZero }}</h3> <h3>{{ 12.345678 | number(3) }}</h3> <!-- 当前时间的毫秒值 --> <h3>{{currentTume | date}}</h3> </div> </body>