程序开发过程中经常会碰到需要对某一个数据进行加工或优化后使用或显示，这个时候就需要用到过滤器。 过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理，这点要切记。 过滤器可被用于一些常见的文本格式化。 过滤器分为全局过滤器和局部过滤器
在双花括号中使用管道符(pipeline) |隔开，或者v-bind 表达式
//过滤器的简单使用 <p>{{ msg | msgFilter }}</p> //多个过滤器的链式调用，从左到右的顺序依次执行过滤器 <p>{{ msg | msgFilter | msgFilter2 }}</p> //过滤器函数可带参数 <p>{{ msg | msgFilter | msgFilter2 | msgFilter3('参数1'，'参2') }}</p>先看代码再看效果图：
注意：replace第一个参数是个字符串，那么它只会替换第一个匹配子串。如果replace第一个参数是 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串；否则，它也只替换第一个匹配子串。
注意： 当存在局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！
<body> <div id="app"> <!-- //过滤器的简单使用 --> <p>{{ msg | msgFilter2 }}</p> </div> <script> // 定义一个 Vue 全局的过滤器，名字叫做 msgFilter Vue.filter('msgFilter', function (msg) { // 字符串的 replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则 // return msg.replace(/文字/g,"句子"); return msg.replace("文字","句子"); }) var vm = new Vue({ el: '#app', data: { msg: '我是一段文字，很长很长的文字，中文字' }, // 定义局部过滤器，字段为过滤器名 filters: { msgFilter2: function(msg) { return msg.replace("文字","句子"); } } }); </script> </body>