1、vue过滤器简介
vue过滤器就是用来过滤模型数据，在显示之前进行数据处理和筛选。
2、vue过滤器语法
语法：{{ data | filter1(参数) | filter2(参数) }}
3、vue内置过滤器
vue1.0中有很多过滤器，例如currency，uppercase，lowercase，limitBy，orderBy，filterBy
vue2.0中已经删除了所有内置过滤器，全部被废除。如何解决？
1）使用第三方工具库
如：loadash库、date-fns库（日期格式化）、accounting.js（对货币格式化）等
2）使用自定义过滤器
4、自定义过滤器
分类：全局过滤器，局部过滤器
4.1 自定义全局过滤器
语法：使用全局方法Vue.filter(过滤器ID，过滤器函数)，过滤器写在window.onload=function(){ new Vue...}的外面。
4.2 自定义局部过滤器
语法：使用全局方法filters:{过滤器ID:(过滤器参数1，过滤器参数2...)=>{函数回调}}，过滤器写在new Vue里面。
1 1 <!DOCTYPE html> 2 2 <html lang="en"> 3 3 <head> 4 4 <meta charset="UTF-8"> 5 5 <title>自定义过滤器</title> 6 6 <!-- 引入vue--> 7 7 <script src="../vue/vue.js"></script> 8 8 <script> 9 9 //自定义全局过滤器，将小于10的数字十位补0 10 10 Vue.filter('addZero',function(data){ 11 11 console.log(data) 12 12 return data<10?'0'+data:data //如果data小于10，给十位补0，否则返回data 13 13 }); 14 14 //自定义全局过滤器，将时间戳显示成年月日时分秒 15 15 Vue.filter('date',data=>{ 16 16 let d = new Date(data); 17 17 return d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds() 18 18 }) 19 19 window.onload=function(){ 20 20 new Vue({ 21 21 el:'#hello', 22 22 //data用来存储数据 23 23 data:{ 24 24 currentTime:Date.now() 25 25 }, 26 26 //methods用来存储方法 27 27 methods:{ 28 28 29 29 }, 30 30 //自定义局部过滤器，将数字保留3位小数 31 31 filters:{ 32 32 number:(data,n)=>{ 33 33 //console.log(data,n) 34 34 return data.toFixed(n) 35 35 } 36 36 } 37 37 }) 38 38 } 39 39 </script> 40 40 </head> 41 41 <body> 42 42 <div id="hello"> 43 43 <!-- 将小于10的数字十位补0 --> 44 44 <h3>{{8|addZero}}</h3> 45 45 <!-- 将数字保留3位小数 --> 46 46 <h3>{{12.3456789|number(3)}}</h3> 47 47 <!-- 将时间戳显示成年月日时分秒 --> 48 48 <h3>{{currentTime|date}}</h3> 49 49 </div> 50 50 </body> 51 51 </html>