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="$ ...
随机推荐
- 电子质检报告系统v3.8
南京转折点信息是太阳升软件全资子公司,一家专业从事医药软件开发的医药软件企业. 根据新版GSP支持医药企业药品质检报告电子化的要求及国家药监局的解释:供货商提供的加盖企业电子印章的电子药品检验报告与纸 ...
- 你需要掌握的http知识
作为一名前端er,http是我们必须要掌握的,那么我们到底需要掌握哪些东西呢 一.基础知识 这里我们介绍与http相关的TCP.IP.DNS.url.uri 1.IP IP地址是我们很熟悉的东西,最常 ...
- uvaoj 10474 - Where is the Marble?(sort+lower_bound)
https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
- Qt-QML-C++交互实现文件IO系统-后继-具体文件IO的实现
在上一篇文章中,我大致将这个QML中的文件IO类搭出了大致的框架,那么,今天抽时间写了一点文件的读写,这里我使用的文件流来读写文件. 文件结构如图 在QML中调用这个类了,就见简单的读取了一个JSON ...
- Linux命令应用大词典-第23章 进程和服务管理
23.1 ps:报告当前进程的快照 23.2 top:显示当前正在运行的进程 23.3 pgrep:按名称和其他属性查找进程 23.4 pidof:查找正在运行的进程的进程号 23.5 pstree: ...
- TW实习日记:第24-25天
项目的交付期是真的赶...一直在不断地修改一些小bug,然后消息推送功能出了一个问题,就是不知道为什么PC端会发送两次消息到移动端后台.其中第一条正常第二条会有乱码不正常,可以说是很奇怪了,一开始都认 ...
- Java学习 · 初识 面向对象深入一
面向对象深入 1.面向对象三大特征 a) 继承 inheritance 子类可以从父类继承属性和方法 子类可以提供自己的属性方法 b) 封装 encapsulation 对外隐藏某些属性和方法 对外公 ...
- python同时遍历两个list
两个list, 有对应关系,希望同时完成遍历 用迭代器迭代的方法也不是不可以,python提供了更直观的方法: 可以使用zip把两个list打包 , 类似: list1 = [1,2,3,4] lis ...
- java学习笔记-8.对象的容纳
1.Iterator(迭代器)和Enumeration(枚举类),都是用来遍历集合的,他们都是接口.区别是Enumeration只能读取集合的数据,而Iterator可以对数据进行删除,Iterato ...
- 使用open live writee写的博客
1. 安装包 下载链接:open live writer 2. 安装及使用教程 学习教程(转载他人) 3. 插入个图片 4. 写段代码 写不了,插件用不了 5. 插件使用: 参考文章:(http:// ...