Vue-Methods中使用Filter

Posted 2020-10-19 莫问今朝

1.Vue中Filter声明方式

Vue中存在两种声明Filter过滤器的方式:

　　1.全局过滤器

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

 

      这种方式将过滤器声明到了Vue类型上,所有Vue对象即可访问这个过滤器

　　2.本地过滤器

new Vue({
      filters:{
          testFilter2(val){
              console.log("本地过滤器",val);
          }
      }
 })

 

    这种方式将过滤器声明到这个Vue对象中,所以只能这个Vue对象进行访问

2.Vue中在Methods中访问Filter

 Vue中在Methods中访问Filter有两种方式,分别对应两种Filter的声明方式

 1.访问全局过滤器

 <div id="body">
       <button @click=‘getGlobal()‘>调用全局过滤器</button>
    </div>
    <script >
        Vue.filter(‘testFilter1‘,function(val){
          console.log("全局过滤器",val);
        })
      new Vue({
            el:‘#body‘,
          
            methods:{
                getGlobal(){
                    //使用Vue.Filter()方式获取全局过滤器
                    var te = Vue.filter(‘testFilter1‘);
                    //调用全局过滤器
                    te(‘filter‘);
                }
            }
        })
    </script>

 

2.访问本地过滤器

 <div id="body">
       <button @click=‘getLocal()‘>调用本地过滤器</button>
    </div>
    <script >
      new Vue({
            el:‘#body‘,
            filters:{
                testFilter2(val){
                    console.log(‘本地过滤器‘,val);
                }
            },
            methods:{
                getLocal(){
                    //使用this.$options.filters[]方式获取本地过滤器
                    var te = this.$options.filters[‘testFilter2‘];
                    //调用本地过滤器
                    te(‘filter‘);
                }
            }
        })
    </script>