Vue过滤器filters

使用场景

用于一些常见的文本格式化。也许后端返回的数据格式并不是最终想要展示出来的，通过过滤器可以进行处理成自己想要展示出来的格式。由“管道”符号指示。

使用方式

1.双花括号插值

{{message | myFilter}}

2.v-bind表达式

<el-tag :type="message | myFilter"></el-tag>

3.vue的生命周期中，如用在methods方法中

this.$options.filters['这里是过滤器的名字']('过滤器的参数')

4.还可以接受函数作为参数

this.$options.filters['这里是过滤器的名字']('参数一', this.fun('zhangyue'))

5.过滤器可以串联，filterA的结果将被传入filterB的参数中

{{message | filterA | filterB}}

example

v-for循环渲染一个数组对象的时候

example one

const arr = [
{
	id: 1,
	name: '张张'
},
{
	id: 2,
	name: '悦悦'
}
]

<ul>
	<li v-for="item in arr" :key="item.id">{{item | myFilterA | myFilterB}}</li>
</ul>

export default {
	filters: {
		myFilterA(message) {
			return '我是' + message
		},
		myFilterB(message) {
			return message + '串联咯'
		}
	}
}

最终输出

我是张张串联咯
我是悦悦串联咯

example two

<el-table-column
  label="status"
  width="100"
>
  <template slot-scope="scope">
    <el-tag :type="scope.row.status | statusFilter">{{
      scope.row.status
    }}</el-tag>
  </template>
</el-table-column>

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  }
}

补充

{{message | filterA('arg1', 'arg2')}}

filterA被定义为接收3个参数的过滤器函数。message作为第一个参数，arg1作为第二个参数，arg2作为第三个参数。
以上我们所说的都是定义局部过滤器，下面看看官网所提的定义全局过滤器。
在创建vue实例之前全局定义过滤器

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

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