web前端vue filter 过滤器


Posted in Javascript onJanuary 12, 2018

vue的过滤器通常用在一些常见的文本格式化,过滤器可以用在两个地方:双花括号插值和 v-bind 表达式。

比如给价格自动加上中文的钱的字符“¥”或者是给一个时间段或(时间戳)相互之间的转换过滤。

在javascript和jquery的年代!时间段的显示或者是提交,都是要在显示的时候要转换下或者提交的时候转换下,这样就有点繁琐了(个人用了vue后的感觉繁琐了)。

不多说直接看例子如下:

filter定义的过滤器可以局部,可以全局的下面就直接说全局的

老样子还是等先注册一个全局的过滤器关键字(filter)

全局的注册过滤器是在main.js这个文件里,当然也可以单独的一个js文件里

Vue.filter('dateconversion', function (value) { // 一个时间戳转正常的过滤器
 let date = new Date(value) // nuw 一个时间
 let getHours // 小时
 let getMinutes // 分
 if(date.getHours() < 10){getHours = "0"+date.getHours()}else{ getHours = date.getHours()}
// 判断小时是否小于10的补全:加0
 if(date.getMinutes() < 10){getMinutes = "0"+date.getMinutes()}else{ getMinutes = date.getMinutes()}
// 判断分是否小于10的补全:加0
 return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+ getHours +":"+ getMinutes // 返回转换后的值
})

使用起来很方便的,可以在各个组件里凡事有要转换显示时间的都可以用

<template>
{{date | dateconversion}} // 使用方式,就是怎么简单,整个项目随便用
</template> 
<script>
export default {
 data () {
  return {
   date: '' // 后台传来的时间戳
  }
 }
}
</script>

好了!简单的介绍了过滤器使用方法和方式,下一章我会讲稍微复杂点,串联过滤器和带参数的过滤器。

Javascript 相关文章推荐
DOM精简教程
Oct 03 Javascript
使用jQuery操作Cookies的实现代码
Oct 09 Javascript
原生js实现给指定元素的后面追加内容
Apr 10 Javascript
原生javascript模仿win8等待提示圆圈进度条
Apr 24 Javascript
jQuery 删除或是清空某个HTML元素示例
Aug 04 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
Aug 26 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 Javascript
three.js 制作动态二维码的示例代码
Jul 31 Javascript
你可能不知道的前端算法之文字避让(inMap)
Jan 12 #Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 #Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 #Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 #Javascript
如何去除vue项目中的#及其ie9兼容性
Jan 11 #Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 #Javascript
详解VUE2.X过滤器的使用方法
Jan 11 #Javascript
You might like
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
JavaScript Date对象使用总结
2009/05/14 Javascript
js模拟类继承小例子
2010/07/17 Javascript
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
JS正则替换掉小括号及内容的方法
2016/11/29 Javascript
jQuery File Upload文件上传插件使用详解
2016/12/06 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
2017/01/08 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
JS得到当前时间的方法示例
2017/03/24 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
JS控制GIF图片的停止与显示
2019/10/24 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
python文件写入write()的操作
2019/05/14 Python
PyQt5实现简易电子词典
2019/06/25 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
jQuery treeview树形结构应用
2021/03/24 jQuery
财务会计专业毕业生自荐信
2013/10/19 职场文书
宿舍使用违章电器检讨书
2014/01/12 职场文书
公司合作意向书范文
2014/07/30 职场文书
购房协议书范本
2014/10/02 职场文书
小学运动会宣传稿
2015/07/23 职场文书
毕业生的自我鉴定表范文
2019/05/16 职场文书
Python pandas求方差和标准差的方法实例
2021/08/04 Python
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS