Vue自带的过滤器有哪些-创新互联
小编给大家分享一下Vue自带的过滤器有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联专业为企业提供歙县网站建设、歙县做网站、歙县网站设计、歙县网站制作等企业网站建设、网页设计与制作、歙县企业网站模板建站服务,10多年歙县做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。vue自带的9种过滤器
一、过滤器写法
{{ message | Filter}}
二、Vue自带的过滤器:capitalize
功能:首字母大写
Vue自带的过滤器 {{message | capitalize}}
代码输出:Abc
三、Vue自带的过滤器:uppercase
功能:全部大写
Vue自带的过滤器 {{message | uppercase}}
代码输出:ABC
四、Vue自带的过滤器:uppercase
功能:全部小写
Vue自带的过滤器 {{message | lowercase}}
代码输出:abc
五、Vue自带的过滤器:currency
功能:输出金钱以及小数点
参数:
第一个参数 {String} [货币符号] - 默认值: '$'
第二个参数 {Number} [小数位] - 默认值: 2
Vue自带的过滤器 {{message | currency}} {{message | currency '¥' "1"}}
六、Vue自带的过滤器:pluralize
功能: 如果只有一个参数,复数形式只是简单地在末尾添加一个 “s”。如果有多个参数,参数被当作一个字符串数组,对应一个、两个、三个…复数词。如果值的个数多于参数的个数,多出的使用最后一个参数。
参数:{String} single, [double, triple, ...
Vue自带的过滤器 {{message}} {{message | pluralize 'item'}}
- {{item}} {{item | pluralize 'item'}}
- {{item}} {{item | pluralize 'st' 'rd'}}
- {{item}} {{item | pluralize 'item'}}
- {{item}} {{item | pluralize 'st' 'rd'}}
七、Vue自带的过滤器:debounce
(1)限制: 需在@里面使用
(2)参数:{Number} [wait] - 默认值: 300
(3)功能:包装处理器,让它延迟执行 x ms, 默认延迟 300ms。包装后的处理器在调用之后至少将延迟 x ms, 如果在延迟结束前再次调用,延迟时长重置为 x ms。
Vue自带的过滤器
八、Vue自带的过滤器:limitBy
(1)限制:需在v-for(即数组)里面使用
(2)两个参数:
第一个参数:{Number} 取得数量
第二个参数:{Number} 偏移量
Vue自带的过滤器
- {{item}}
- {{item}}
九、Vue自带的过滤器:filterBy
(1)限制:需在v-for(即数组)里面使用
(2)三个参数:
第一个参数: {String | Function} 需要搜索的字符串
第二个参数: in (可选,指定搜寻位置)
第三个参数: {String} (可选,数组格式)
Vue自带的过滤器
- {{item}}
- {{item.name}}
- {{item.name+"+"+item.dada}}
十、Vue自带的过滤器:orderBy
(1)限制:需在v-for(即数组)里面使用
(2)三个参数:
第一个参数: {String | Array
第二个参数: {String} 可选参数 order 决定结果升序(order >= 0)或降序(order < 0),默认是升序
Vue自带的过滤器
- {{item}}
- {{item}}
- {{item.name}}
- {{item.name}}
- {{item.name}}
以上是“Vue自带的过滤器有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
本文题目:Vue自带的过滤器有哪些-创新互联
网页链接:http://ybzwz.com/article/deoedi.html