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 相关文章推荐
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
Dec 22 Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
js获取当前地址 JS获取当前URL的示例代码
Feb 26 Javascript
jQuery AjaxUpload 上传图片代码
Feb 02 Javascript
jquery动态创建div与input的实例代码
Oct 12 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
Apr 13 Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 Javascript
JS异步函数队列功能实例分析
Nov 28 Javascript
JS数组求和的常用方法总结【5种方法】
Jan 14 Javascript
bootstrap datepicker的基本使用教程
Jul 09 Javascript
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
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脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
jQuery的deferred对象详解
2014/11/12 Javascript
js实现点击链接后延迟3秒再跳转的方法
2015/06/05 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
JS绘制微信小程序画布时钟
2016/12/24 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
利用H5api实现时钟的绘制(javascript)
2020/09/13 Javascript
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
[01:03:47]VP vs NewBee Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
python函数与方法的区别总结
2019/06/23 Python
详解python中的模块及包导入
2019/08/30 Python
python中sort sorted reverse reversed函数的区别说明
2020/05/11 Python
Python键鼠操作自动化库PyAutoGUI简介(小结)
2020/05/17 Python
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
护士的自我鉴定
2014/02/07 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年科研工作总结
2014/12/03 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
开业庆典致辞
2015/08/01 职场文书
python3中apply函数和lambda函数的使用详解
2022/02/28 Python