zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    java枚举实例
    POI读取excel
    POI导入
    javascript闭包
    dom4j测试
    Android开发UI之ListView中的Button点击设置
    eclipse不自动弹出提示(Alt+/ 快捷键失效)
    Android开发之全局获取Context的技巧
    Android开发之点击两次Back键退出App
    Android开发UI之开源项目第一篇——个性化控件(View)篇
  • 原文地址:https://www.cnblogs.com/yan7/p/8133897.html
Copyright © 2011-2022 走看看