前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue-Methods中使用Filter

Vue-Methods中使用Filter

作者头像
莫问今朝
发布2019-02-25 16:43:07
1.1K0
发布2019-02-25 16:43:07
举报
文章被收录于专栏:博客园

1.Vue中Filter声明方式

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

1.全局过滤器

代码语言:javascript
复制
 Vue.filter('testFilter1',function(val){
          console.log("全局过滤器",val);
 })

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

2.本地过滤器

代码语言:javascript
复制
new Vue({
      filters:{
          testFilter2(val){
              console.log("本地过滤器",val);
          }
      }
 })

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

2.Vue中在Methods中访问Filter

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

 1.访问全局过滤器

代码语言:javascript
复制
 <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.访问本地过滤器

代码语言:javascript
复制
 <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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-12-28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.Vue中Filter声明方式
  • 2.Vue中在Methods中访问Filter
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档