让每一名学员高薪就业
返回列表 发新帖

Vue过滤器

[复制链接]

128

主题

430

帖子

2735

积分

版主

Rank: 7Rank: 7Rank: 7

积分
2735

版主论坛荣誉内测

发表于 2018-5-16 18:00:31  | 显示全部楼层 | 阅读模式
Vue过滤器主要被用于过滤一些常见的文本,比如输入人的姓名james,可以通过过滤器把它的首字符转换成大写(James),也可以将输入的数字12转换****民币(¥12)或者美元($12)等等,所以过滤器主要将我们所需要的文本进行预定义格式化。
过滤器主要用于两个地方,双括号插值或者v-bind表达式,v-bind表达式主要是vue2.0+版本。
Vue1.0版本提供了很多内置的过滤器,我们来看看有哪些:
{{'james'|uppercase}} 小写转换成大写
{{'JAMES'|lowercase}} 大写转换成小写
{{'james'|capitalize}} 首字母转换成大写
{{obj|json}} json过滤器,使json对象能够显示出来
{{'james'|lowercase|capitalize}} 多个过滤器同时使用
钱的标志:{{12|currency}} --->$12.00
传参:{{12|currency "¥"}} --->¥12.00
图片1.png
图片2.png
以上是vue1.0版本的内置过滤器,但是在vue2.0版本中过滤器系统内置的过滤器已经被删除掉了,只能自定义过滤器,定义的方法如下:
图片3.png
过滤器IDfilterName  过滤器函数:function(value,参数){  }
过滤器函数中value是使用这个过滤器中data对象中的值,而且这个值必须是第一个参数,不能放在后面
图片4.png
效果图:
图片5.png
上述定义的过滤器是我们在vue实例中定义的过滤器,就只能在当前实例中调用,当然我们也可以在全局中定义过滤器,这样就可以在所有的实例中使用
定义的方法:
图片6.png
    这里就不做演示了,大家可以自己测试下。


   感谢源码时代教学讲师提供此文章!
   本文为原创文章,转载请注明出处!


“尔康,你现在幸福吗?”“紫薇,你忘了?我一直就姓福啊。”
回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Java培训  |   PHP培训  |   UI培训  |   H5培训  |   Python培训  |   大数据培训  |   如何报名  |   视频下载
快速回复 返回顶部 返回列表