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及时间戳转换& ...
随机推荐
- jquery-ui sortable 使用实例
jquery-ui sortable 使用实例 最近公司需要做任务看板,需要拖拽效果.点击查看效果.由于网站是基于vue的技术栈,最开始找了一个现成的vue封装的拖拽组件:Vue.Draggable, ...
- FreeCL
FreeCL 1.03(Free Control Library)是一个开源且免费的Windows控件库,它属于3D图形引擎FreeGE中的一部分,用户可以自由地用于个人或商业开发.FreeCL使用类 ...
- Ionic Framework 4 介绍
Ionic Framework 4是一个开源UI工具包,用于使用Web技术(HTML,CSS和JavaScript)构建高性能的高质量移动和桌面应用程序.Ionic Framework专注于前端用户体 ...
- java多线程之wait和notify
多线程中的通信是非常重要的概念,线程直接实现通信就可以并发完成很多复杂工作. java在Object类中就设计了wait()和notify()两个方法,以解决这个问题. 1.释义: wait()方法将 ...
- 安装metasploitable3的经验总结
一个月没有写学习记录了,但是这一个月一直没闲着,抽空写写自己装metasploitable3的经验教训(提示:只要你的环境配置没错,步骤没错,多试几次就会成功了,我总共测试了15次,,短的耗时30分钟 ...
- 【JRebel 作者出品--译文】Java class 热更新:关于对象,类,类加载器
一篇大神的译文,勉强(嗯..相当勉强)地放在类加载器系列吧,第8弹: 实战分析Tomcat的类加载器结构(使用Eclipse MAT验证) 还是Tomcat,关于类加载器的趣味实验 了不得,我可能发现 ...
- VMware克隆CentOS7,解决网络配置问题
问题: 安装CentOS7 mini版,静态IP配置完毕后,关闭虚机CentOS7-1,克隆虚拟机为CentOS-2.克隆出来的虚拟机使用ifconfig命令,无法发现网卡,只有一个lo设备.虚机无法 ...
- Spark学习之路(二)—— Spark开发环境搭建
一.安装Spark 1.1 下载并解压 官方下载地址:http://spark.apache.org/downloads.html ,选择Spark版本和对应的Hadoop版本后再下载: 解压安装包: ...
- Kali Linux Web渗透测试手册(第二版) - 1.0 - 渗透测试环境搭建
一.配置KALI Linux和渗透测试环境 在这一章,我们将覆盖以下内容: 在Windows和Linux上安装VirtualBox 创建一个Kali Linux虚拟机 更新和升级Kali Linux ...
- php程序守护进程
php命令程序实习守护进程2种方式: 1.使用nohup nohup php myprog.php > log.txt & 2.使用程序 function daemonize() { $ ...