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. 【CF613D】Kingdom and its Cities(虚树,动态规划)

    [CF613D]Kingdom and its Cities(虚树,动态规划) 题面 洛谷 CF 翻译洛谷上有啦 题解 每次构建虚树,首先特判无解,也就是关键点中存在父子关系. 考虑\(dp\),设\ ...

  2. 北京Uber优步司机奖励政策(2月29日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  3. 【费元星】crt 无法上传文件,总是显示盾牌表示-完美解决

    将如下内容保存到文件中,已.bat 结尾 taskkill /f /im explorer.exeattrib -s -r -h "%userprofile%\AppData\Local\i ...

  4. L010小结后自考题

    . 查询2号分区的inode和block的数量和尺寸 . 在lcr文件夹下创建一个a文件夹,然后进入文件夹中,创建3个3层目录,5个1层目录,5个文件 . 滤出a文件夹下的所有一级目录(4种方法) . ...

  5. 手机APP测试如何进行兼容性测试?

    Android App兼容性测试是一个比较重要的App评价内容,实际上兼容性测试不仅仅和测试人员相关,在开发阶段就应当着重考虑,因为兼容性问题是除了实现App本身要求的功能后,必须要关注.而且至关重要 ...

  6. lesson 22 by heart

    lesson 22 by heart on end = continuously 连续不断地 know/learn sth by heart 记忆sth falter: speak hesitantl ...

  7. 编写你自己的Python模块

    其实网上Python教程挺多的,编写你自己的模块很简单,这其实就是你一直在做的事情!这是因为每一个 Python 程序同时也是一个模块.你只需要保证它以 .py 为扩展名即可.下面的案例会作出清晰的解 ...

  8. 【xmlHttp_Class 远程访问类】使用说明

    类名:xmlHttp_Class 说明:远程获取外部网站数据信息或执行一个外部网站程序 目录: 类型 名称 参数 返回 说明 属性 [必需] [xmlHttp].url = [urlString] - ...

  9. 【swiper】 滑块组件说明

    swiper 滑块视图容器,其原型如下: <swiper indicator-dots="[Boolean]" indicator-color="[Color]&q ...

  10. MySQL三方面优化

    第一方面:30种mysql优化sql语句查询的方法1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中使用 ...