概念
Vue1.0提供了一系列的固定逻辑来使程序员更加容易的实现这些功能，我们称它为系统过滤器。Vue也提供了一个接口用来给程序员定义属于自己的特殊逻辑，Vue称之为自定义过滤器。
自定义私有的过滤器
下面是一个冗余的示范代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <h4>{{time}}</h4> <h4>{{time | datefmt}}</h4> </div> <div id="app1"> <h4>{{time | datefmt}}</h4> </div> <script> new Vue({ el: "#app1", data: { time: new Date() }, filters: { datefmt: function(input) { var result = ""; var year = input.getFullYear(); var month = input.getMonth() + 1; var day = input.getDate(); result = year + "-" + month + "-" + day; return result; } } }) new Vue({ el: '#app', data: { time: new Date() }, //在某一个Vue对象内部定义的过滤器称之为私有过滤器 //这种过滤器只有在当前vue对象el指定的监管区域起作用 filters: { //input是自定义过滤器的默认参数，input的值永远都是取自于 | 左边的内容 datefmt: function(input) { //过滤器的逻辑：将input的值格式化成yyyy-MM-dd字符串输出 var result = ""; var year = input.getFullYear(); var month = input.getMonth() + 1; var day = input.getDate(); result = year + "-" + month + "-" + day; return result; } } }) </script> </body> </html>
自定义全局过滤器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <h4>{{time}}</h4> <h4>{{time | datefmt}}</h4> </div> <div id="app1"> <h4>{{time | datefmt}}</h4> </div> <script> Vue.filter("datefmt", function(input) { var result = ""; var year = input.getFullYear(); var month = input.getMonth() + 1; var day = input.getDate(); result = year + "-" + month + "-" + day; return result; }) new Vue({ el: "#app1", data: { time: new Date() } }) new Vue({ el: '#app', data: { time: new Date() } }) </script> </body> </html>