vue过滤器filter

1. 过滤器filter可使用在花括号{{ } 和v-bind表达式两个地方；放在管道 |的后面。

<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

2. 过滤器表达式总是接收之前表达式的结果作为参数。并且，过滤器可以串联使用。

{{ message | filterA | filterB }}   //filterA的参数是message , filterB的参数是filterA的结果

3. 组件选项可以定义本地过滤器，也可以创建vue实例之前定义全局过滤器。

<el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
 filters: {       
    statusFilter(status) { //定义组件本地过滤器：
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  }

转载于:https://www.jianshu.com/p/26f04ce01aff