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 相关文章推荐
在视频前插入广告
Nov 20 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
Aug 19 Javascript
JavaScript使用键盘输入控制实现数字验证功能
Aug 19 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
Angular.js中ng-include用法及多标签页面的实现方式详解
May 07 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
Jun 11 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 Javascript
js尾调用优化的实现
May 23 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
Oct 14 Javascript
Vue.js组件props数据验证实现详解
Oct 19 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代码网站如何防范SQL注入漏洞攻击建议分享
2012/03/01 PHP
php切割页面div内容的实现代码分享
2012/07/31 PHP
php删除数组元素示例分享
2014/02/17 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
一个有意思的鼠标点击文字特效jquery代码
2017/09/23 jQuery
vue实现提示保存后退出的方法
2018/03/15 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
JSONObject与JSONArray使用方法解析
2020/09/28 Javascript
Python编程中的文件操作攻略
2015/10/16 Python
Saltstack快速入门简单汇总
2016/03/01 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
2020/03/10 HTML / CSS
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
应届生人事助理求职信
2013/11/09 职场文书
行政专员的岗位职责
2014/03/10 职场文书
优秀员工推荐信
2014/05/10 职场文书
Mysql案例刨析事务隔离级别
2021/09/25 MySQL
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript
nginx访问报403错误的几种情况详解
2022/07/23 Servers