Vue-Methods中使用Filter

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>