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-columnlabel="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及时间戳转换
摘要:Vue的filters过滤器是比较常见的一个知识点,下面我将结合时间戳转换的例子带你快速了解filters的用法. 本文分享自华为云社区<三分钟掌握Vue过滤器filters及时间戳转换& ...
- vue如何过滤html标签,Vue过滤器filters使用详解
这次给大家带来Vue过滤器filters使用详解,Vue过滤器filters使用的注意事项有哪些,下面就是实战案例,一起来看一下. 示例代码 采用vue单文件组件,使用moment插件格式化日期 {{ ...
- vue 过滤器 filters
<!-- 过滤器: 定义:对要显示的数据进行特定格式化之后再显示(使用与一些简单的逻辑)语法:1. 注册过滤器:Vue.filter.(name, callback) 或 new Vue{fil ...
- 三分钟掌握Vue过滤器filters及时间戳转换
一.速识概念: 大家好呀,
- vue中过滤器filters的this指向问题。
今天在完成一个时间戳转化时想试试vue的过滤器filters,代码如下: execute_time(time) {if (time === 0) return '/'else return this. ...
- Vue过滤器(filters)的简单使用
1.Vue过滤器的简单介绍 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式.过滤器应该被添加在 JavaScript 表达 ...
- Vue中filters过滤器无效的原因
Vue中filters过滤器无效的原因 如果你的过滤器内部需要用到循环 请不要使用map函数代替for循环或者是foreach循环 如图: 因为过滤器本身需要一个return 把结果返回出去 然而ma ...
- Vue过滤器的简单使用--实时显示格式化的时间
Vue的过滤器的使用是在{{}}插值的尾部添加一个管道符 | 过滤的规则是自己定义的,通过给Vue实例添加选项filters来设置 通过过滤器对时间进行格式化从而实时显示时间 <!doctyp ...
- web前端技巧分享:vue过滤器的那点事!
关于vue的过滤器,其实在vue1.0的时候是内置了过滤器的,但是自从到了2.0之后就被去掉了,但是我们可能还会使用到,所以就需要自己定义过滤器了,下面小千就带你了解一下如何定义过滤器和过滤器都有哪些 ...
最新文章
- 手机上有android,android-在不同智能手机上的Videoview行为(具有...
- 最好用的货币:货币发展史和BCH
- Uva 11292 The Dragon of Loowater 模拟题
- Eclipse 高亮显示
- [ CodeForces 865 D ] Buy Low Sell High
- (转载)hadoop2.2.0集群的HA高可靠的最简单配置
- docker 训练深度学习_利用RGB图像训练MultiModality的深度学习模型进行图像分割
- 通用单向链表设计(三)——接口的测试
- 用于单元测试的JUnit教程–最终指南(PDF下载)
- java是纯_让你真正了解Java(纯干货)
- 【华为大咖分享】6.华为专家揭秘研发效能提升之道(后附PPT下载地址)
- 特斯拉这款车被评为全球最好现代大马力汽车之一
- 【09】Jenkins:Pipeline 补充
- es6转es5_ES6 配置运行环境
- ai面试的优缺点_AI面试需要注意哪些问题?
- Dominant Indices
- VSCode 过滤.meta 文件
- MySql表情emoji存储‘\xF0\x9F\x98\x82‘ for column ‘msg‘ at row 1 报错解决,亲测效果佳
- 功率MOSFET的正向导通等效电路
- Termios 函数说明