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 相关文章推荐
索趣科技的答案
Feb 07 Javascript
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
JavaScript传递变量: 值传递?引用传递?
Feb 22 Javascript
原生js ActiveXObject获取execl里面的值
Nov 01 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
浅谈Javascript中深复制
Dec 01 Javascript
浅谈js中的闭包
Mar 16 Javascript
JavaScript节点及列表操作实例小结
Aug 05 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 Javascript
8个非常实用的Vue自定义指令
Dec 15 Vue.js
如何使用原生Js实现随机点名详解
Jan 06 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简单开启gzip压缩方法(zlib.output_compression)
2013/04/13 PHP
基于Zookeeper的使用详解
2013/05/02 PHP
用JavaScript脚本实现Web页面信息交互
2006/10/11 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
2013/07/31 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
2018/08/12 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
python下解压缩zip文件并删除文件的实例
2018/04/24 Python
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
python列表使用实现名字管理系统
2019/01/30 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
python 实现 hive中类似 lateral view explode的功能示例
2020/05/18 Python
普天C++笔试题
2016/03/20 面试题
Linux开机引导的步骤是什么
2014/02/26 面试题
EntityManager都有哪些方法
2013/11/01 面试题
旅游与酒店管理的自我评价分享
2013/11/03 职场文书
优秀班组长事迹
2014/05/31 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
数学教研活动总结
2014/07/02 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
信访维稳工作汇报
2014/10/27 职场文书
“学党章、守党纪、讲党规”学习心得体会
2016/01/14 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android