美文网首页壁纸小家程序员让前端飞
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)带参数过滤

    上次说了过滤器可以简单的做些文本格式的过滤比如时间戳的转换等,这次我们来讲讲如何在过滤器(filter)上带参数的...

  • vue学习02

    一过滤器 也可以传递多个参数,用+号连接 vue.filter定义正则表达式过滤器可以调用多次过滤器 过滤器调用就...

  • 9.自定义vue全局过滤器

    1.Vue.filter('过滤器名字',过滤器函数):

  • Java Web 之过滤器

    前言 学一学Java Web 三大组件之一过滤器。 Filter过滤器 Filter过滤器用来对Web资源进行一些...

  • web前端vue:过滤器(filter)

    vue的过滤器通常用在一些常见的文本格式化,过滤器可以用在两个地方:双花括号插值和 v-bind 表达式。比如给价...

  • 王龙

    过滤器div: {{123.456|ab}} 1全局过滤器: Vue.filter('abc'...

  • vue过滤器过滤时间全局过滤器和局部过滤器

    1全局过滤器 Vue.filter有两个参数一个是过滤器名字一个是过滤器处理函数,函数中第一个参数是默认要过滤的数...

  • Vue过滤器

    Vue过滤器 使用Vue.filter()来对指定的元素进行过滤,function中传递的参数即是el表达式中的第...

  • Vue-04

    过滤器:对显示在页面上的数据进行筛选 全局过滤器 和Vue同级 Vue.filter(“过滤器名称”,func...

  • 8、Filter过滤器

    1、什么是过滤器? Filter也称之为过滤器。Web开发人员通过Filter技术,对web服务器管理的所有web...

网友评论

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

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