Vue中过滤器有两种：
1、全局过滤器Vue.filter('过滤器名',过滤方式fn);
2、组件内过滤器filters:{'过滤器名',过滤方式fn}
使用:{{msg|过滤器方法名}}

一、局部过滤器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> 我输入的：<input type="text" v-model="instring"><br> 正常输出的：{{instring}} <br> 反转输出：{{instring|rever}} <br> {{instring|revers('反转输出：')}} <br></div><script type="text/javascript" src="vue.js"></script><script type="text/javascript"> new Vue({ el: '#app', data() { return { instring: '' } }, // 局部过滤器 filters: { // 默认第一个变量为参数 rever(val) { // 将输入的字符逐个分割进行反转再对得到的字符进行拼接 return val.split("").reverse().join("") }, revers(val, args) { // 将输入的字符逐个分割进行反转再对得到的字符进行拼接 return args + val.split("").reverse().join("") } } })</script></body></html>二、全局过滤器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> 我输入的：<input type="text" v-model="instring"><br> 正常输出的：{{instring}} <br> {{instring|revers('反转输出：')}}</div><script type="text/javascript" src="vue.js"></script><script type="text/javascript"> // 全局过滤器 // val={{instring}} args={{'反转输出：'}} Vue.filter('revers', function (val, args) { return args + val.split('').reverse().join('') }) new Vue({ el:'#app', data(){ return { instring:'' } } })</script></body></html>