vue过滤器的使用

Posted 2020-11-21 websmile

一、在methods中使用过滤器------全局定义的过滤器

　　

//main.js中

import Vue from ‘vue‘
Vue.filter(‘testFilter1‘,function(val){
          console.log("全局过滤器",val);
 })


//demo.js
methods:{
    getGlobal(){
         //使用Vue.Filter()方式获取全局过滤器
        var te = Vue.filter(‘testFilter1‘);
        //调用全局过滤器
        te(‘需要过滤的东东‘);
    }
}

 

二、在methods中使用过滤器------在组件中定义的过滤器 

filters:{
    testFilter2(val){
        console.log(‘本地过滤器‘,val);
     }
},
methods:{
    getLocal(){
        //使用this.$options.filters[]方式获取本地过滤器
        var te = this.$options.filters[‘testFilter2‘];
         //调用本地过滤器
         te(‘需要过滤的东东‘);
    }
}    

三、在页面中使用过滤器

{{ ‘需要过滤的东东’ | testFilter2()}}

如果需要参数

{{ ‘需要过滤的东东’ | testFilter2(参数1，参数2)}}