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 相关文章推荐
可以将word转成html的js代码
Apr 11 Javascript
Javascript面向对象设计一 工厂模式
Dec 20 Javascript
javascript禁用键盘功能键让右击及其他键无效
Oct 09 Javascript
jquery实现的用户注册表单提示操作效果代码分享
Aug 28 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
Jul 11 Javascript
jQuery+json实现动态创建复杂表格table的方法
Oct 25 Javascript
canvas实现流星雨的背景效果
Jan 13 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
浅谈vue引用静态资源需要注意的事项
Sep 28 Javascript
js blob类型url的视频下载问题的解决
Nov 29 Javascript
json_decode 索引为数字时自动排序问题解决方法
Mar 28 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 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
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
thinkPHP5框架导出Excel文件简单操作示例
2018/08/03 PHP
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
Asp.Net alert弹出提示信息的几种方法总结
2014/01/29 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
vue动态设置页面title的方法实例
2020/08/23 Javascript
vue-simple-uploader上传成功之后的response获取代码
2020/09/07 Javascript
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
利用python爬取软考试题之ip自动代理
2017/03/28 Python
python difflib模块示例讲解
2017/09/13 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
Python文件操作基本流程代码实例
2017/12/11 Python
python 切换root 执行命令的方法
2019/01/19 Python
将labelme格式数据转化为标准的coco数据集格式方式
2020/02/17 Python
python将数据插入数据库的代码分享
2020/08/16 Python
python中turtle库的简单使用教程
2020/11/11 Python
python线程优先级队列知识点总结
2021/02/28 Python
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
SheIn沙特阿拉伯:女装在线
2020/03/23 全球购物
PHP如何对用户密码进行加密
2014/07/31 面试题
请说出你所知道的线程同步的方法
2013/04/19 面试题
车辆维修工自我评价怎么写
2013/09/20 职场文书
给学校的建议书
2014/03/12 职场文书
公司授权委托书
2014/04/04 职场文书
机电一体化应届生求职信
2014/08/09 职场文书
万能检讨书2000字
2014/10/17 职场文书
高考升学宴答谢词
2015/01/20 职场文书
烟台的海导游词
2015/02/02 职场文书
python缺失值的解决方法总结
2021/06/09 Python
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python