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及时间戳转换& ...
随机推荐
- QtScript, QML, Quick1, Quick2, Declarative 之间的关系
QtScript是基于 ECMAScript 的脚本语言 在脚本中可以访问原有C++代码中的QObject类型及其子类的实例,连接信号和槽:也可以创建QObject类型及其子类的实例. 但是QtScr ...
- 在SYSTEM权限下以当前用户权限运行程序
http://download.csdn.net/download/lai444132348/9730266 using System; using System.Runtime.InteropSer ...
- Java实现Qt的SIGNAL-SLOT机制(保存到Map中,从而将它们关联起来,收到信号进行解析,最后反射调用)
SIGNAL-SLOT是Qt的一大特色,使用起来十分方便.在传统的AWT和Swing编程中,我们都是为要在 监听的对象上添加Listener监听器.被监听对象中保存有Listener的列表,当相关事件 ...
- 发现 TSplitter 在嵌套时不好用, 索性写了个替代品(处理MouseDown,MouseMove,MouseUp,然后设定控件的Left值就可以了)
代替 TSplitter 的 TDirPanel 类: unit DirPanel; interface uses Classes, Controls, Forms, ExtCtrls; type ...
- 在Linux中如何利用backtrace信息解决问题
在Linux中如何利用backtrace信息解决问题 一.导读 在程序调试过程中如果遇到程序崩溃死机的情况下我们通常多是通过出问题时的栈信息来找到出错的地方,这一点我们在调试一些高级编程语言程序的时候 ...
- Paragon NTFS for Mac 15.5.53 中文破解版(激活码)下载
Paragon NTFS for Mac中文破解版是一款超级受欢迎的简单.高效.安全的格式读写软件,提供给大家,再也不用到处找Paragon NTFS序列号和Paragon NTFS激活码啦,帮您轻松 ...
- .Net上传文件处理三大范式,及开发注意事项
最近工作内容涉及到一点前端的内容,把学习到的内容记录下来,在今后的开发过程中,不要犯错.本篇只针对一些刚入职的小白及前端开发人员,大牛请绕道!~ 刚开始我们先不讲上传文件的防范问题,先通过一个例子,让 ...
- 常用的HTTP状态代码(4xx、5xx)详解
HTTP状态代码常用的如下: 400 无法解析此请求. 401.1 未经授权:访问由于凭据无效被拒绝. 401.2 未经授权: 访问由于服务器配置倾向使用替代身份验证方法而被拒绝. 401.3 未经授 ...
- C++开发常见问题记录
1.提示strcpy等函数不安全,建议使用strcpy_s等函数. 处理方法:在VS集成环境的 项目->属性->C/C++->预处理器->预处理器定义 中添加 _CRT_SEC ...
- Docker-CE 安装(centos7)
配置yum源 > cd /etc/yum.repos.d/ > mkdir repo_bak > mv *.repo repo_bak/ > wget http://mirro ...