vue中的过滤器分为两种：局部过滤器和全局过滤器
定义无参数全局过滤器（可定义多个） <div>{{msg | upper }}</div> Vue.filter('upper',function(val){ //将字符串的一个字符大写,slice从第一个字符之后截取 return val.charAt(0).toUpperCase()+val.slice(1); }); 定义无参数局部过滤器 <div>{{msg | upper1}}</div> filters:{ upper1:function(val){ return val.charAt(0).toUpperCase()+val.slice(1); } }完整示例：将字符串的第一个字符大写
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="msg" /> <div>{{msg | upper }}</div> <div>{{msg | upper1}}</div> <div>{{msg | lower}}</div> </div> <script type="text/javascript"> //全局过滤器 Vue.filter('upper',function(val){ //将字符串的一个字符大写,slice从第一个字符截取 return val.charAt(0).toUpperCase()+val.slice(1); }); Vue.filter('lower',function(val){ //将字符串的一个字符大写,slice从第一个字符截取 return val.charAt(0).toLowerCase()+val.slice(1); }) var vm = new Vue({ el:"#app", data:{ msg:"" }, //局部过滤器 filters:{ upper1:function(val){ return val.charAt(0).toUpperCase()+val.slice(1); } } }) </script> </body> </html>3.定义有参数全局过滤器
<div>{{date | format('ss')}}</div> Vue.filter("format",function(value,arg){ if(arg=="ss"){ var ret = ''; ret += value.getFullYear()+'-'+ (value.getMonth()+1)+'-'+value.getDate(); return ret; } })有参数局部过滤器类似；
完整示例：过滤时间
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="app"> <div>{{date | format('ss')}}</div> </div> <script type="text/javascript"> Vue.filter("format",function(value,arg){ if(arg=="ss"){ var ret = ''; ret += value.getFullYear()+'-'+ (value.getMonth()+1)+'-'+value.getDate(); return ret; } return value; }) var vm = new Vue({ el:"#app", data:{ date: new Date() } //带参数的过滤器 // filters:{ // format:function(value,arg){ // if(arg=="yyyy-MM-dd"){ // var ret = ''; // ret +=value.getFullYear()+'-'+ (value.getMonth()+1)+value.getData(); // return ret; // } // return value; // } // } }); </script> </body> </html>注意： 1、 当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！ 2、 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右；
