vue——filter过滤器

参数是10，显示是100效果如下：

•  {{ 'a','b' | filterB }} 表示'a'和'b'分别作为参数传给filterB

1、局部过滤器

• 方式一

关键性代码

<div> {{ 10 | getNum(20) }} </div>
 <!--10是第一个参数，20是第二个参数，如果只有一个参数，小括号可以不用写-->

filters: {
    getNum(value, num) {
      return value * 10 + num;
    }
  }

• 方式二（推荐）

在utils文件夹里新建filter.js文件

 

代码如下：

function getData(value, num) {
  return value*10 + num
}

module.exports = {
  getData: getData,
}

使用：

 

2、全局过滤器

在main.js中添加如下代码：

Vue.filter('getNum', function (value,num) {
  return value * 10 + num;
})

在需要使用到的地方：

<div> {{ 10 | getNum(20) }} </div>
 <!--10是第一个参数，20是第二个参数，如果只有一个参数，小括号可以不用写-->

3、附加：

多个过滤器串联：

{{ message | filterA | filterB }}

说明：filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。