< div id = "app" > < input type = "text" v - model = 'msg' > < ! -- upper 被定义为接收单个参数的过滤器函数,表达式 msg 的值将作为参数传入到函数中 --> < div > { { msg | upper } } < / div > < ! -- 支持级联操作 upper 被定义为接收单个参数的过滤器函数,表达式msg 的值将作为参数传入到函数中。 然后继续调用同样被定义为接收单个参数的过滤器 lower ,将upper 的结果传递到lower中 --> < div > { { msg | upper | lower } } < / div > < div : abc = 'msg | upper' > 测试数据 < / div > < / div > < script type = "text/javascript" > / / lower 为全局过滤器 Vue.filter ( 'lower' , function ( val ) { return val.charAt ( 0 ) .toLowerCase ( ) + val.slice ( 1 ) ; } ) ; var vm = new Vue ( { el : ' #app', data : { msg : '' } , / / filters 属性 定义 和 data 已经 methods 平级 / / 定义filters 中的过滤器为局部过滤器 filters : { / / upper 自定义的过滤器名字 / / upper 被定义为接收单个参数的过滤器函数,表达式 msg 的值将作为参数传入到函数中 upper : function ( val ) { / / 过滤器中一定要有返回值 这样外界使用过滤器的时候才能拿到结果 return val.charAt ( 0 ) .toUpperCase ( ) + val.slice ( 1 ) ; } } } ) ; < / script > |