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();
    month < 10 ? (month = "0" + month) : month;
    day < 10 ? (month = "0" + day) : day;
    hour < 10 ? (hour = "0" + hour) : hour;
    minute < 10 ? (minute = "0" + minute) : minute;
    second < 10 ? (second = "0" + second) : second;
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 自定义时间过滤器的更多相关文章

  1. Vue2.0如何自定义时间过滤器

    我们知道Vue2.0开始不再支持自带的过滤器,需要我们自己去自定义过滤器,方法如下:           我们可以自己定义一个时间过滤器,在此引用了一个日期处理类库(Moment.js)可以很快的实现 ...

  2. vue2.0 自定义过滤器(filter)实例

    一.过滤器简介 (1)过滤器创建 过滤器的本质 是一个有参数 有返回值的方法 new Vue({ filters:{ myCurrency:function(myInput){ return 处理后的 ...

  3. vue2.0自定义指令

    前面一片文章说了vue2.0过滤器,其实自定义指令跟过滤器非常相似,单就定义方式而言,其与过滤器完全一致,分为局部指令,和全局指令.不过就是filter改为directive的区别. 过滤器一般用于对 ...

  4. CKEditor5 + vue2.0 自定义图片上传、highlight、字体等用法

    因业务需求,要在 vue2.0 的项目里使用富文本编辑器,经过调研多个编辑器,CKEditor5 支持 vue,遂采用.因 CKEditor5 文档比较少,此处记录下引用和一些基本用法. CKEdit ...

  5. vue2.0 自定义过滤器

    2.0中已经废弃了过滤器,需要我们自定义 <div id="app"> {{message|uppercase}} </div> //过滤器 Vue.fil ...

  6. vue2 自定义时间过滤器

    // template {{a | data}} //script data:{   a: Date.now() } filters: {   data:function (input) {

  7. vue2.0自定义指令的使用方法

    感觉2.0好坑啊,自定义指令和1.0完全不一样,并且文档写得也不太清晰,下面是我写得一个demo,希望帮助大家更好地理解自定义指令 <!DOCTYPE html> <html lan ...

  8. vue2.0 自定义 提示框(Toast)组件

    1.自定义 提示框 组件 src / components / Toast / index.js /** * 自定义 提示框( Toast )组件 */ var Toast = {}; var sho ...

  9. vue2.0 自定义 折叠列表(Accordion)组件

    1.自定义  折叠列表 Accordion.vue (1)sass  版本 <!-- 折叠列表 组件 --> <template> <nav :class="$ ...

随机推荐

  1. leetcode笔记9 Move Zeroes

    题目要求: Given an array nums, write a function to move all 0's to the end of it while maintaining the r ...

  2. 两分钟了解Docker的优势

    本文来自网易云社区 我们主要从Docker对业务架构和生产实践的角度来分析. 随着业务规模的逐渐扩大,产品复杂度也随着增加,企业需要解决快速迭代.高可靠和高可用等问题,一个自然的选择是服务化的拆分,把 ...

  3. 利用JSON Schema校验JSON数据格式

    最近笔者在工作中需要监控一批http接口,并对返回的JSON数据进行校验.正好之前在某前端大神的分享中得知这个神器的存在,调研一番之后应用在该项目中,并取得了不错的效果,特地在此分享给各位读者. 什么 ...

  4. TW实习日记:第18天

    今天的bug没有那么多了,都是些小bug,一下就改好了.或者是接口那边数据返回的有问题,通知一下同事就ok了.主要今天是在赶功能进度,然而有一个功能模块需求里并没有写,实在是不知道要做成什么样子,真的 ...

  5. linux学习总结----redis总结

    安装 下载:打开redis官方网站,推荐下载稳定版本(stable) 解压 tar zxvf redis-3.2.5.tar.gz 复制:推荐放到usr/local目录下 sudo mv -r ...

  6. lintcode373 奇偶分割数组

    奇偶分割数组 分割一个整数数组,使得奇数在前偶数在后. 您在真实的面试中是否遇到过这个题? Yes 样例 给定 [1, 2, 3, 4],返回 [1, 3, 2, 4]. 我的方法:设定两个数组,分别 ...

  7. 更新字典 (Updating a Dictionary,UVa12504)

    题目描述: 解题思路: 1.根据:和,获得字符串 2.使用两个map进行比较: #include <iostream> #include <algorithm> #includ ...

  8. 孤荷凌寒自学python第八十五天配置selenium并进行模拟浏览器操作1

    孤荷凌寒自学python第八十五天配置selenium并进行模拟浏览器操作1 (完整学习过程屏幕记录视频地址在文末) 要模拟进行浏览器操作,只用requests是不行的,因此今天了解到有专门的解决方案 ...

  9. logisitic回归

    线性回归目的是找到一条直线(或者超平面)尽可能地接近所有的训练数据点,而对数几率回归的目的是找到一条直线(或者超平面)尽可能地分开两种不同类别的数据点. 对数几率回归感觉更像是一个分类问题.https ...

  10. 5.hadoop常用命令

    1. 单独启动和关闭hadoop服务 启动名称节点 #hadoop-daemon.sh start namenode 启动数据节点 #hadoop-daemons.sh start datanode ...