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 相关文章推荐
实现超用户体验 table排序javascript实现代码
Jun 22 Javascript
解决json日期格式问题的3种方法
Feb 02 Javascript
完美实现仿QQ空间评论回复特效
May 06 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 Javascript
基于jquery实现图片放大功能
May 07 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
javascript基于原型链的继承及call和apply函数用法分析
Dec 15 Javascript
js input输入百分号保存数据库失败的解决方法
May 26 Javascript
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 Javascript
小程序兼容安卓和IOS数据处理问题及坑
Sep 18 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 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
SONY SRF-22W(33W)的电路分析和维修案例
2021/03/02 无线电
PHP 简单日历实现代码
2009/10/28 PHP
js获取div高度的代码
2008/08/09 Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
2010/11/21 Javascript
javascript动态添加checkbox复选框的方法
2015/12/23 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
Vue数组更新及过滤排序功能
2017/08/10 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
python创建线程示例
2014/05/06 Python
Python比较两个图片相似度的方法
2015/03/13 Python
Python脚本暴力破解栅栏密码
2015/10/19 Python
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
python实现列表中由数值查到索引的方法
2018/06/27 Python
Python正则表达式指南 推荐
2018/10/09 Python
浅谈django的render函数的参数问题
2018/10/16 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法
2019/07/04 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
Python基础之函数原理与应用实例详解
2020/01/03 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
css3的transition属性详解
2014/12/15 HTML / CSS
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
命名空间(namespace)和程序集(Assembly)有什么区别
2015/09/25 面试题
小学生评语集锦
2014/04/18 职场文书
春季防火方案
2014/05/10 职场文书
幼儿园标语大全
2014/06/19 职场文书
思品教学工作总结
2015/08/10 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
《酸的和甜的》教学反思
2016/02/18 职场文书