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 相关文章推荐
javascript数组使用调用方法汇总
Dec 08 Javascript
在网页里看flash的trace数据的js类
Jan 10 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
Oct 20 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
jQuery.each使用详解
Jul 07 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
浏览器兼容性问题大汇总
Dec 17 Javascript
Node.js的特点详解
Feb 03 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
Nov 17 Javascript
vue之组件内监控$store中定义变量的变化详解
Nov 08 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 Javascript
vue实现员工信息录入功能
Jun 11 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
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
php桌面中心(二) 数据库写入
2007/03/11 PHP
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
php结合js实现点击超链接执行删除确认操作
2014/10/31 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
精通JavaScript 纠正 cleanWhitespace函数
2010/03/11 Javascript
jquery键盘事件介绍
2011/01/31 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
判断复选框是否被选中的两种方法
2014/06/04 Javascript
JavaScript中的类与实例实现方法
2015/01/23 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
2016/11/25 Javascript
详解JS-- 浮点数运算处理
2016/11/28 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
JavaScript实现换肤功能
2017/09/15 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
python实现的希尔排序算法实例
2015/07/01 Python
布隆过滤器的概述及Python实现方法
2019/12/08 Python
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
销售副总经理岗位职责
2013/12/11 职场文书
大学同学聚会邀请函
2014/01/19 职场文书
培训班开班仪式主持词
2014/03/28 职场文书
房产继承公证书
2014/04/09 职场文书
消防标语大全
2014/06/07 职场文书
小学班级特色活动方案
2014/08/31 职场文书
升学宴学生致辞
2015/09/29 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers