vue 过滤器filter实例详解


Posted in Javascript onMarch 14, 2018

vue的过滤器一般在JavaScript 表达式的尾部,由“|”符号指示:

过滤器可以让我们的代码更加优美,一般可以用在时间格式化,首字母大写等等。

例如:{{ date | dateFormat }}这是过滤器的写法;{{ dateFormat(date) }}这是函数调用的写法

可以看出过滤器的写法更加语义化,让人一眼可以看出它的含义。

<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
<!-- 也可以串联多个过滤器 -->
{{ message | filterA | filterB }}

// 在这个例子中,filterA 被定义为接收单个参数的过滤器函数,表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB,将 filterA 的结果传递到 filterB 中

<!-- 过滤器接收参数 -->
{{ message | capitalize('string', obj) }}

// 这里的参数将在过滤器函数内以第二个参数开始算起第一个参数为要过滤的值message,即'string'为第二个参数,obj为第三个参数。

过滤器方法在接收到参数后,你可以在方法内进行一系列的处理,最终return出处理结果即可。

1、过滤器可以是组件内的

filters: {
 capitalize: function (value) {
 if (!value) return ''
 value = value.toString()
 return value.charAt(0).toUpperCase() + value.slice(1)
 }
}

2、过滤器也可以是挂载在全局Vue里

Vue.filter('capitalize', function (value) {
 if (!value) return ''
 value = value.toString()
 return value.charAt(0).toUpperCase() + value.slice(1)
})

总结

以上所述是小编给大家介绍的vue 过滤器filter实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
javascript 应用小技巧方法汇总
Jul 05 Javascript
Bootstrap CSS布局之代码
Dec 17 Javascript
Angularjs 依赖压缩及自定义过滤器写法
Feb 04 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
Sep 28 Javascript
vue百度地图 + 定位的详解
May 13 Javascript
8 个有用的JS技巧(推荐)
Jul 03 Javascript
Vue实现剪贴板复制功能
Dec 31 Javascript
el-form 多层级表单的实现示例
Sep 10 Javascript
微信小程序实现倒计时功能
Nov 19 Javascript
vue页面切换到滚动页面显示顶部的实例
Mar 13 #Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 #Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 #Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 #Javascript
vue2.0 实现页面导航提示引导的方法
Mar 13 #Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 #Javascript
使用Vuex实现一个笔记应用的方法
Mar 13 #Javascript
You might like
php 随机排序广告的实现代码
2011/05/09 PHP
php通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
2016/06/26 Javascript
浅谈jQuery中的checkbox问题
2016/08/10 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
angular+ionic返回上一页并刷新页面
2017/08/08 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
2017/08/31 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
js用正则表达式筛选年月日的实例方法
2021/01/04 Javascript
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
详解python中sort排序使用
2019/03/23 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
python实现连连看游戏
2020/02/14 Python
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
介绍一下JMS编程步骤
2015/09/22 面试题
银行优秀员工事迹
2014/02/06 职场文书
研究生考核个人自我鉴定
2014/03/27 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
2014年党委工作总结
2014/11/22 职场文书
纪检干部学习心得体会
2016/01/23 职场文书
解析python中的jsonpath 提取器
2022/01/18 Python