Vue之自定义过滤器

来源：互联网发布：放置江湖人物评价算法编辑：程序博客网时间：2024/06/07 07:25

使用Vue.filter('过滤器名称'，方法);

<!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>

阅读全文

0 0