Vue 中怎么自定义过滤器?（精选-持续更新中---）

Vue.js 允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用 在两个地方：双花括号插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示

局部定义过滤器：

 <div class="item-inner">
     <div class="item-title">支付方式：</div>
     <div>{{item.xxx| xxx}}</div>
 </div>

var vm=new Vue({
    el:"#app",
    data:{
        msg:''
    },
    filters: {
      xxx: function (value) {
         switch (value) {
             case 1:
             return '微信支付'
             case 2:
             return '钱包支付'
         }
      }
    }
})

全局定义过滤器：

1、首先在src目录下新建一个filters文件夹并在文件夹里面新建index.js文件存放过滤器方法

 

2、在index.js中写全局过滤器方法

Vue.filter('xxx', value => {
    switch (value) {
        case 1:
            return '微信支付'
        case 2:
            return '会员充值'
    }
})

3、在main.js中全局引入过滤器

 

4、在需要使用过滤器的页面直接使用即可

 <div class="item-inner">
     <div class="item-title">支付方式：</div>
     <div>{{item.xxx| xxx}}</div>
 </div>