过滤器使用

63 阅读1分钟

语法:在模版中使用{{参数一 | 处理函数}};

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

// 在vue中:
filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

// 也可以在创建 `Vue` 实例之前使用全局API`Vue.filter`来定义全局过滤器:
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})
  1. 串联过滤器:
// filterA会将结果作为filterB的参数传递给filterB继续使用
{{ message | filterA | filterB }}

2.接收参数:

// filterA接收三个参数:message, 'arg1', arg2;
{{ message | filterA('arg1', arg2) }}