技术栈

主页 > 其他 >

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

技术栈 - 中国领先的IT技术门户

上次说了过滤器可以简单的做些文本格式的过滤比如时间戳的转换等,这次我们来讲讲如何在过滤器(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)我们一起进步!等你噢~

责任编辑:admin  二维码分享:
本文标签: 过滤器filterAmessagefilterBfilterreturn
点击我更换图片

评论列表