VUE过滤器的使用 vue 时间格式化
过滤器介绍
官方教程地址:https://cn.vuejs.org/v2/guide/filters.html
过滤器常被用于一些文本格式化
我们可以自定义过滤器,可以实现各种各样的功能。
vue时间格式化
创建Date.js
var dateFormat = {
padLeftZero: function (str) {
return ('00' + str).substr(str.length)
},
formatDate: function (date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
}
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
}
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + ''
fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str))
}
}
return fmt
}
}
export default dateFormat;
引入Date.js
import dateFormat from './assets/js/Date'
创建过滤器
filters: {
formatDate(time) {
let date = new Date(time);
return dateFormat.formatDate(date, "yyyy.MM.dd");
}
},
应用过滤器
<p>{{item.createDate | formatDate}}</p>
VUE过滤器的使用 vue 时间格式化的更多相关文章
- vue 工具函数的封装 时间格式化函数
时间代码格式化工具函数的封装 小伙伴们,多封点工具函数,多封装点公共组件,多写点公共样式,照顾下互联网行业的新人把....~~~~~ /** yyyymmdd(new Date) -> &quo ...
- (尚015)Vue过滤器(对显示的数据进行格式化)
现在日期为:当前时间-1970年1月1日0时0分0秒的时间差 日期格式化:百度搜索moment 1.test015.html <!DOCTYPE html><html lang=&q ...
- vue filter方法-时间格式化
plugins/filter.js import Vue from 'vue' // 时间格式化 // 用法:<div>{{data | dataFormat('yyyy-MM-dd hh ...
- Vue Element Form表单时间验证控件使用
如果直接使用Element做时间选择器,其规则(rules)不添加type:'date',会提示类型错误,处理这个需要规范值的类型为date. 时间格式化过滤器 import Vue from 'vu ...
- 3.Vue过滤器
1.概念: Vue.js 允许你自定义过滤器,可被用作一些常见文本的格式化,过滤器可以用在两个地方:mustache 插值和 v-bind 表达式.过滤器应该被添加在 JavaScript 表达式的尾 ...
- 黑马vue---31-32、vue过滤器实例
黑马vue---31-32.vue过滤器实例 一.总结 一句话总结: vue内部的东西,无论是过滤器还是组件,都是键值对的方式 1.过滤器的定义语法? Vue.filter('过滤器的名称', fun ...
- vue - 过滤器filter的基本使用
1.全局过滤器 输出: 过滤器可以多次来调用 输出: 2.私有过滤器 <!DOCTYPE html> <html lang="en"> <head&g ...
- vue中插值表达式中时间转换yyyy-MM-dd HH:mm:ss
vue插值表达式中将时间转换两种方式:一.定义方法 <div id="app">当前实时时间:{{dateFormat(date)}}</div> //时间 ...
- 带你掌握Vue过滤器filters及时间戳转换
摘要:Vue的filters过滤器是比较常见的一个知识点,下面我将结合时间戳转换的例子带你快速了解filters的用法. 本文分享自华为云社区<三分钟掌握Vue过滤器filters及时间戳转换& ...
随机推荐
- C# 遍历窗体控件顺序问题
今天在做C# winform 窗体控件遍历时遇到控件顺序的问题,也就是控件被遍历的先后问题.实际情况如下所述. 窗体界面如下: 界面构成是:主界面有一个 Panel (Panel_14),Panel_ ...
- 使用PyQt5编写一个简单的GUI程序(pyside 有 pyside-uic 把ui文件转成py文件,pyside-rcc 把qrc文件转成 py文件导入就行了)
我做Python窗口界面编程时,经常使用PyQt进行设计.这里简单叙述一下使用PyQt5制作一个简单的图形界面的流程 PyQt的简介以及开发环境的搭建在此不多赘述. 1. 打开Qt Des ...
- js一道面试题
题目是这样的,按照以下函数的结果写一个sub()方法: sub(1)(2)(3);/*return 6*/ sub(4)(3)(3);/*return 10*/ 我的山寨做法: function su ...
- 利用js参数,保持客户端文件的新鲜度
不知道你是否碰到过如下情况,在服务端更新了一个重要的js文件后,由于浏览器的缓存机制,导致用户始终不能获取到最新的文件,此时的你恨不得有孙悟空吹毛化身的法术,帮用户清除浏览器的缓存.缓存既是程序员的好 ...
- 完美解决iis下JWplayer提示Error loading media: File could not be played错误
最近开发项目需要使用JWplayer插件播放视频,但是无论换那个版本.换什么样的视频总是提示Error loading media: File could not be played错误,废了好大的劲 ...
- 如何在 cmd 命令行中查看、修改、删除与添加环境变量
Windows 和 linux 区别 一.查看所有环境变量的名称和值:Linux下:exportWindows下:set二.根据名称查该环境变量的值:Linux下:echo $环境变量名比如:echo ...
- CentOS 7 时间同步方法
centos 7 时间同步使用的是chrony工具 1.检测chrony包是否安装 [root@martin ~]# rpm -qa|grep chrony 2.安装chrony [root@mart ...
- Fabric1.4源码解析:Peer节点背书提案过程
以前从来没有写过博客,从这段时间开始才开始写一些自己的博客,之前总觉得写一篇博客要耗费大量的时间,而且写的还是自己已经学会的,觉得没什么必要.但是当开始用博客记录下来的时候,才发现有些学会的地方只是自 ...
- Spark学习之路(三)—— 弹性式数据集RDDs
弹性式数据集RDDs 一.RDD简介 RDD全称为Resilient Distributed Datasets,是Spark最基本的数据抽象,它是只读的.分区记录的集合,支持并行操作,可以由外部数据集 ...
- vuex中使用对象展开运算符
使用场景 当需要进行vuex进行数据状态管理的时候,会使用到mapGetters,mapState,还有自身的计算属性的时候,这个时候就会用到这个了! 1.首先需要安装 npm install bab ...