Vue过滤器filters如何使用
作者：悦悦猪
Vue过滤器filters用于一些常见的文本格式化,通过过滤器可以进行处理成自己想要展示出来的格式,由“管道”符号指示,本文给大家介绍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({
// ...
})
当全局过滤器和局部过滤器重名时，会采用局部过滤器。
到此这篇关于Vue过滤器filters的文章就介绍到这了,更多相关Vue过滤器filters内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！