局部过滤器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>filters</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <input type="text" v-model="test" placeholder="请输入"/> <div>{{test|filter1|filter2}}</div> </div> </body> </html> <script type="text/javascript" charset="utf-8"> var app = new Vue({ el: "#app", data: { test: '' }, filters: { filter1: function(val) { return val.toUpperCase(); }, filter2: function(val) { var reg = /d/g; return val.replace(reg, '*'); } } }); </script>
全局过滤器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>filters</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <input type="text" v-model="test" placeholder="请输入" /> <div>{{test|filter1|filter2}}</div> </div> </body> </html> <script type="text/javascript" charset="utf-8"> Vue.filter('filter1', function(val) { return val.toUpperCase(); }); Vue.filter('filter2', function(val) { var reg = /d/g; return val.replace(reg, '*'); }); var app = new Vue({ el: "#app", data: { test: '' }, }); </script>