vue过滤器filter

2018-10-23  本文已影响0人  嗨姑娘_大个子
  1. 过滤器filter可使用在花括号{{ }v-bind表达式两个地方;放在管道 |的后面。
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
  1. 过滤器表达式总是接收之前表达式的结果作为参数。并且,过滤器可以串联使用。
{{ message | filterA | filterB }}   //filterA的参数是message , filterB的参数是filterA的结果
  1. 组件选项可以定义本地过滤器,也可以创建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]
    }
  }
上一篇 下一篇

猜你喜欢

热点阅读