使用Vue.filter('过滤器名称'，方法);
1.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> </script> </head> <body> <div id="box"> {{a | toDou}} </div> <script> Vue.filter('toDou',function(input){ return input<10?'0'+input:''+input; }); var vm=new Vue({ data:{ a:9 }, methods:{ } }).$mount('#box'); </script> </body> </html>
效果：
2.带参数的自定义过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> </script> </head> <body> <div id="box"> {{a | toDou 1 2}} </div> <script> Vue.filter('toDou',function(input,a,b){ alert(a+','+b); return input<10?'0'+input:''+input; }); var vm=new Vue({ data:{ a:9 }, methods:{ } }).$mount('#box'); </script> </body> </html>
3.自定义日期
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> </script> </head> <body> <div id="box"> {{a | date}} </div> <script> Vue.filter('date',function(input){ var oDate=new Date(input); return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds(); }); var vm=new Vue({ data:{ a:Date.now() }, methods:{ } }).$mount('#box'); </script> </body> </html>