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>