7. 过滤器的使用 -- filter

vue 过滤器官网

过滤器

专门对变量的原始值先加工再显示的一种特殊函数。

创建

全局过滤器 filter

Vue.filter('过滤器名', function (旧值) {
  return 新值;
})

使用

<元素>{{ 变量名 | 过滤器名 }}</元素>

会把页面中的变量名 传给过滤器中的函数

组件间的过滤器 filters

filters: {
  过滤器名: function (旧值) {
    return 新值;
  }
}

使用

<元素>{{ 变量名 | 过滤器名 }}</元素>

当全局过滤器和局部过滤器重名时，会采用局部过滤器

过滤器传参

filters: {
  过滤器名: function (旧值,自定义形参,...) {
    return 新值;
  }
}

使用

<元素>{{ 变量名 | 过滤器名(实参值1,....) }}</元素>

页面中的实参值与过滤器中的自定义形参对应

过滤器连用

<元素>{{ 变量名 | 过滤器1 | 过滤器2 | ... }}</元素>