vue2.0 自定义时间过滤器
html
<td>{{serverInfo.serverTime| formatTime('YMDHMS')}}</td>
js
serverTime: new Date().getTime(),
filters: {
// 时间过滤器
formatTime: function(value, type) {
let dataTime = "";
let data = new Date();
data.setTime(value);
let year = data.getFullYear();
let month = data.getMonth() + 1;
let day = data.getDate();
let hour = data.getHours();
let minute = data.getMinutes();
let second = data.getSeconds();
if (type == "YMD") {
dataTime = year + "-" + month + "-" + day;
} else if (type == "YMDHMS") {
dataTime =
year +
"-" +
month +
"-" +
day +
" " +
hour +
":" +
minute +
":" +
second;
} else if (type == "HMS") {
dataTime = hour + ":" + minute + ":" + second;
} else if (type == "YM") {
dataTime = year + "-" + month + "-";
}
return dataTime; // 将格式化后的字符串输出到前端显示
}
},
vue2.0 自定义时间过滤器的更多相关文章
- Vue2.0如何自定义时间过滤器
我们知道Vue2.0开始不再支持自带的过滤器,需要我们自己去自定义过滤器,方法如下: 我们可以自己定义一个时间过滤器,在此引用了一个日期处理类库(Moment.js)可以很快的实现 ...
- vue2.0 自定义过滤器(filter)实例
一.过滤器简介 (1)过滤器创建 过滤器的本质 是一个有参数 有返回值的方法 new Vue({ filters:{ myCurrency:function(myInput){ return 处理后的 ...
- vue2.0自定义指令
前面一片文章说了vue2.0过滤器,其实自定义指令跟过滤器非常相似,单就定义方式而言,其与过滤器完全一致,分为局部指令,和全局指令.不过就是filter改为directive的区别. 过滤器一般用于对 ...
- CKEditor5 + vue2.0 自定义图片上传、highlight、字体等用法
因业务需求,要在 vue2.0 的项目里使用富文本编辑器,经过调研多个编辑器,CKEditor5 支持 vue,遂采用.因 CKEditor5 文档比较少,此处记录下引用和一些基本用法. CKEdit ...
- vue2.0 自定义过滤器
2.0中已经废弃了过滤器,需要我们自定义 <div id="app"> {{message|uppercase}} </div> //过滤器 Vue.fil ...
- vue2 自定义时间过滤器
// template {{a | data}} //script data:{ a: Date.now() } filters: { data:function (input) {
- vue2.0自定义指令的使用方法
感觉2.0好坑啊,自定义指令和1.0完全不一样,并且文档写得也不太清晰,下面是我写得一个demo,希望帮助大家更好地理解自定义指令 <!DOCTYPE html> <html lan ...
- vue2.0 自定义 提示框(Toast)组件
1.自定义 提示框 组件 src / components / Toast / index.js /** * 自定义 提示框( Toast )组件 */ var Toast = {}; var sho ...
- vue2.0 自定义 折叠列表(Accordion)组件
1.自定义 折叠列表 Accordion.vue (1)sass 版本 <!-- 折叠列表 组件 --> <template> <nav :class="$ ...
随机推荐
- day 4 飞机大战-面向对象
1.飞机类 #-*- coding:utf-8 -*- import pygame import time from pygame.locals import * class HeroPlane(ob ...
- 4567: [Scoi2016]背单词
4567: [Scoi2016]背单词 https://www.lydsy.com/JudgeOnline/problem.php?id=4567 题意: 题意看了好久,最后在其他人的博客里看懂了的. ...
- CLR via c#读书笔记九:接口
1.接口对一组方法签名进行了统一命名.接口还能定义事件.无参属性和有参属性(C#的索引器). 2.c#禁止接口定义任何一种静态成员. 3.C#编译器要求将实现接口的方法标记为public.CLR要求将 ...
- spring源码-bean之加载-2
一.前面说了bean的容器初始化,后面当然是说bean的加载.这里还是不讲解ApplicationContext的bean的加载过程,还是通过最基础的XmlBeanFactory来进行讲解,主要是熟悉 ...
- 转:Docker创建centos的LNMP镜像
转自:http://www.vckai.com/p/29 1. 安装docker 这个就不说了,不会的可以看下我之前的文章<Docker介绍及安装>. 1)启动docker # serv ...
- R语言使用过程中出现的问题--attach()函数的使用
使用attach(file)时,一定要配合使用detach(file),否则再此运行程序时极易出现问题,The following objects are masked ... 此外工作空间中不能有与 ...
- ES2015学习笔记
ECMA6学习笔记 参考资料 ECMAScript6入门:http://es6.ruanyifeng.com/ 官方文档:https://babeljs.io/learn-es2015/ 开发软件:W ...
- 「赛后补题」Meeting(HDU-5521)
题意 A,B两个人分别在1和n区.每个区有若干点(区之间的点可以重复,各个区内点间的距离一致),给出区之间有联系的图以及到达所需时间.求两个人见面最短时间以及在哪个区碰面(可有多个) 分析 隐式图搜索 ...
- DEDEcms调用当前栏目顶级栏目url地址
include/common.func.php 找到这个文件 在文件最下方加入以下代码: //获取顶级栏目url function GetTopTypeurl($id) { global $dsql; ...
- linux部署MantisBT(二)部署php
二.部署php 1.下载php安装包 http://php.net/downloads.php 2.安装php yum install libxml2 yum install libxml2-deve ...