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 相关文章推荐
javascript 写类方式之六
Jul 05 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
String.prototype实现的一些javascript函数介绍
Nov 22 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 Javascript
jquery 动态增加删除行的简单实例(推荐)
Oct 12 Javascript
基于jQuery实现Tabs选项卡自定义插件
Nov 21 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
基于JS开发微信网页录音功能的实例代码
Apr 30 Javascript
详解解决小程序中webview页面多层history返回问题
Aug 20 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
Feb 12 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
我常用的几个类
2006/10/09 PHP
PHP CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
一个简单的js动画效果代码
2010/07/20 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
jQuery Migrate 插件用法实例详解
2019/05/22 jQuery
JS如何生成动态列表
2020/09/22 Javascript
详解Vue3.0 + TypeScript + Vite初体验
2021/02/22 Vue.js
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
numpy基础教程之np.linalg
2019/02/12 Python
详解重置Django migration的常见方式
2019/02/15 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
PyQt5根据控件Id获取控件对象的方法
2019/06/25 Python
Python坐标线性插值应用实现
2019/11/13 Python
Keras loss函数剖析
2020/07/06 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
用HTML5 实现橡皮擦的涂抹效果的教程
2015/05/11 HTML / CSS
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
社会工作专业求职信
2014/07/15 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书
酒会邀请函
2015/01/31 职场文书
作弊检讨书范文
2015/05/06 职场文书
工作犯错保证书
2015/05/11 职场文书
2016年端午节红领巾广播稿
2015/12/18 职场文书
python四个坐标点对图片区域最小外接矩形进行裁剪
2021/06/04 Python
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫