首页 / VUE / Vue过滤器的相关介绍
Vue过滤器的相关介绍
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Vue过滤器的相关介绍,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1150字,纯文字阅读大概需要2分钟。
内容图文
![Vue过滤器的相关介绍](/upload/InfoBanner/zyjiaocheng/998/ec4e9dcea0f242a7a57daddc2fe8750c.jpg)
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
以上是vue1.0版本的内置过滤器,但是在vue2.0版本中过滤器系统内置的过滤器已经被删除掉了,只能自定义过滤器,定义的方法如下:
过滤器ID:filterName 过滤器函数:function(value,参数){ }
过滤器函数中value是使用这个过滤器中data对象中的值,而且这个值必须是第一个参数,不能放在后面
效果图:
上述定义的过滤器是我们在vue实例中定义的过滤器,就只能在当前实例中调用,当然我们也可以在全局中定义过滤器,这样就可以在所有的实例中使用
定义的方法:
图片6.png (9.05 KB, 下载次数: 82)
2018-5-16 17:59 上传
这里就不做演示了,大家可以自己测试下。
内容总结
以上是互联网集市为您收集整理的Vue过滤器的相关介绍全部内容,希望文章能够帮你解决Vue过滤器的相关介绍所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。