欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue过滤器filter

程序员文章站 2024-02-09 16:03:04
...
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]
    }
  }