Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
一，不带参数的过滤器及其使用
1，不带参数的过滤器的定义语法
Vue.filter(‘过滤器名称‘, function(msg){}) //其中msg是过滤器管道符前面传递过来的数据
2，不带参数的过滤器调用时的格式 {{ msg | 过滤器名称}}，注意：过滤器不会改变原始数据
3，定义一个无参数的全局过滤器
Vue.filter(‘msgFormat‘, function(msg){
return msg.replace(/你好/g, ‘替代内容‘)
})
4，使用一
<div id="app"> <p>{{msg | msgFormat}}</p> </div> <script> //定义一个Vue全局的过滤器 Vue.filter(‘msgFormat‘, function(msg){ return msg.replace(/你好/g, ‘替代内容‘) }) var vm = new Vue({ el: ‘#app‘, data: { msg: ‘你好1你好2你好3你好4‘ }, methods: { } }) </script>
二，不带参数的过滤器及其使用
1，定义一个带参数的全局过滤器
Vue.filter(‘msgFormat‘, function(msg, arg){
return msg.replace(/你好/g, arg)
})
2，使用
<div id="app"> <p>{{msg | msgFormat(‘疯狂‘)}}</p> </div> <script> //定义一个Vue全局的过滤器 Vue.filter(‘msgFormat‘, function(msg, arg){ return msg.replace(/你好/g, arg) }) var vm = new Vue({ el: ‘#app‘, data: { msg: ‘你好1你好2你好3你好4‘ }, methods: { } }) </script>
三，可以定义并使用多个过滤器
<div id="app"> <p>{{msg | msgFormat(‘疯狂‘) | test}}</p> </div> <script> //定义一个Vue全局的过滤器 Vue.filter(‘msgFormat‘, function(msg, arg){ return msg.replace(/你好/g, arg) }) Vue.filter(‘test‘, function(msg){ return msg + ‘=====‘ }) var vm = new Vue({ el: ‘#app‘, data: { msg: ‘你好1你好2你好3你好4‘ }, methods: { } }) </script>
原文：https://www.cnblogs.com/ella-li/p/14628896.html