美文网首页壁纸小家程序员让前端飞
web前端vue:过滤器(filter)带参数过滤

web前端vue:过滤器(filter)带参数过滤

作者: 玩点小技术 | 来源:发表于2018-01-13 14:15 被阅读99次
    filter过滤器注册实例

    上次说了过滤器可以简单的做些文本格式的过滤比如时间戳的转换等,这次我们来讲讲如何在过滤器(filter)上带参数的做出运算。
    在这里再次强调下,我这里的演示的例子是全局的注册(在main.js文件上注册)过滤器的例子。废话不多说,直接上码如下:

    Vue.filter('add', function (a,b,c) {  // 一个简单的字符运算方法
      return a + b + b   // 两数相加
    })
    // add是在main.js的文件里全局注册
    // add被注册成一个可以接收三个参数过滤器的函数
    <template>
    {{message | add(filterA,filterB)}}   // 调用方式
    </template>
    // message会作为第一个参数,filterA,filterB是第二个和第三个参数
    <script>
    export default {
       data () {
           return {
               message: '',   // 后台数据
               filterA: '',  // 后台数据
               filterB: ''  // 后台数据
           }
       }
    }
    </script>
    

    这种方式是类似函数调用的形式,filter过滤器它还有一种串联的使用方式:

    先注册好两个过滤器
    Vue.filter('filterA', function (val) {  //第一个过滤器
      return val + 1       // 返回值
    })
    Vue.filter('filterB', function (val) {  //第二个过滤器
      return val - 1       // 返回值
    })
    
    调用方式:
    <template>
      {{message | filterA | filterB}}  //message任意的字符数字filterA过滤器1,filterB过滤器2
    </template>
    <script>
    export default {
       data () {
           return {
               message: ''   // 后台数据
           }
       }
    }
    </script>
    

    message会作为filterA的参数,然后filterA返回的数据会作为filterB的参数,这样就串联对一个数据做两次甚至多次的处理
    有不懂的朋友或喜欢vue的可以加我微信(nihaomeili87)我们一起进步!等你噢~

    相关文章

      网友评论

        本文标题:web前端vue:过滤器(filter)带参数过滤

        本文链接:https://www.haomeiwen.com/subject/ltycoxtx.html