vue——filter过滤器

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

 {{ 'a','b' | filterB }} 表示'a'和'b'分别作为参数传给filterB 1、局部过滤器 方式一

关键性代码

 {{ 10 | getNum(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;
})

在需要使用到的地方：

 {{ 10 | getNum(20) }} 
 

3、附加： 多个过滤器串联：

{{ message | filterA | filterB }}

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