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调用WebService的示例
Apr 07 Javascript
extjs 学习笔记(三) 最基本的grid
Oct 15 Javascript
javascript数组详解
Oct 22 Javascript
ie下js不执行的几种可能
Feb 28 Javascript
微信小程序页面间通信的5种方式
Mar 31 Javascript
详解react使用react-bootstrap当轮子造车
Aug 15 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
详解用JS添加和删除class类名
Mar 25 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
JavaScript声明变量和数据类型的转换
Apr 12 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
真正的ZIP文件操作类(php)
2007/07/21 PHP
PHP之变量、常量学习笔记
2008/03/27 PHP
二进制交叉权限微型php类分享
2014/02/07 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
PHP实现采集中国天气网未来7天天气
2014/10/15 PHP
10个超级有用值得收藏的PHP代码片段
2015/01/22 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
判断脚本加载是否完成的方法
2009/05/26 Javascript
javascript dom 操作详解 js加强
2009/07/13 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
2013/11/17 Javascript
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
node中Express 动态设置端口的方法
2017/08/04 Javascript
JavaScript和TypeScript中的void的具体使用
2019/09/12 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
python使用cPickle模块序列化实例
2014/09/25 Python
分享Python字符串关键点
2015/12/13 Python
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
接口的多继承会带来哪些问题
2015/08/17 面试题
预备党员公开承诺书
2014/05/28 职场文书
放飞理想演讲稿
2014/09/09 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL