vue中格式化时间过滤器

最新推荐文章于 2024-04-24 14:47:46 发布
最新推荐文章于 2024-04-24 14:47:46 发布
阅读量1.4w 收藏 2
点赞数 1
分类专栏： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qinchaidaren/article/details/76163750
版权

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<div>
 {{ message | formatTime('YMD')}}
</div>
<div>
{{ message | formatTime('YMDHMS')}}
</div>
   <div>
    {{ message | formatTime('HMS')}}
   </div>
    <div>
    {{ message | formatTime('YM')}}
   </div>
    </div>
<script>
//元素的补零计算
function addZero(val){
 if(val < 10){
  return "0" +val;
 }else{
  return val;
 }
};


console.log(addZero(9))


//实现vue中的过滤器功能  先定义过滤器 在使用        value是过滤器前面的值，type是过滤器中定义的字段
Vue.filter("formatTime",function(value,type){
var dataTime="";
var data = new Date();  
             data.setTime(value); 
     var year   =  data.getFullYear();  
             var month  =  addZero(data.getMonth() + 1);  
             var day    =  addZero(data.getDate()); 
             var hour   =  addZero(data.getHours());
var minute =  addZero(data.getMinutes());
var second =  addZero(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;//将格式化后的字符串输出到前端显示
});


var app = new Vue({
 el: '#app',
 data: {
   message: '1501068985877'
 }
         });
</script>
</body>
</html>

Lofty_ambition
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中格式化时间过滤器代码实例
01-21
本文实例为大家分享了vue格式化时间过滤器的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Document</title> ...
vue中的过滤器及其时间格式化问题
12-28
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由 管道 符号指示： ...
vue里面如何把时间格式化
jakelihua
06-14 2966
简介：本文讲解vue里面如何把时间格式化显示出来。
vue中如何使用filters过滤时间？
weixin_52004060的博客
07-12 1039
1、首先在变量后面输入管道符 |，再在管道符 | 后面添加mapTime（）函数（函数名随意） <div>{{ row.updateDate | mapTime }}</div> 2、与data、methods同级位置添加过滤器，并定义mapTime（）函数，函数参数可以接收到管道符前面的变量，对参数数据进行改造后，函数返回的字符串就会显示在Html中 filters: { mapTime(date) { const nDate = new Da..
vue各种时间类型转换
最新发布
weixin_45884508的博客
04-24 1019
【代码】vue各种时间类型转换。
HBase（七）Hbase过滤器
dengshuabi6933的博客
08-17 183
一、过滤器（Filter） 　　基础API中的查询操作在面对大量数据的时候是非常苍白的，这里Hbase提供了高级的查询方法：Filter。Filter可以根据簇、列、版本等更多的条件来对数据进行过滤，基于Hbase本身提供的三维有序（主键有序、列有序、版本有序），这些Filter可以高效的完成查询过滤的任务。带有Filter条件的RPC查询请求会把Filter分发到各个RegionSe...
vue的时间过滤器
weixin_45867685的博客
04-13 171
vue的时间过滤器 <!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="winowh=device-winowh, initial-scale=1.0"> <title>过滤器...
vue格式化时间
m0_71349739的博客
01-19 363
vue格式化时间，月份，日，小时，分，秒，不够两位数时自动补0，用到的时padStart(), padEnd()
vue通过过滤器实现数据格式化
11-20
一、本节说明 在使用插值表达式的时候，我们通常会有一种...全局过滤器（定义一个用于做日期格式化的过滤器） 过滤器的第一个参数是固定的，就是输入的数据。对于{{message|date-format('yyyy-mm-dd')}}而言，参数i
vue2.0 自定义日期时间过滤器
热门推荐
m0_37068028的博客
06-07 1万+
vue2.0 自定义时间日期过滤器 filters:
Vue使用filter过滤器格式化时间的两种方式
技术成长ing
12-10 9118
通常用new Date()实例对象时，默认调用的是toString()方法，返回的是一个字符串， 需要把时间统一格式化为自己想要的格式，在vue中为我们提供了一个filter过滤器， 去格式化自己想要的时间格式，本人用过两种方式去格式化时间，下面请看代码: (仅供参考) 第一种格式化方法： 第一种方法比较简单，主要是导入了一个moment.js插件，里面封装了格式化时间的方...
vue时间格式化实例代码
08-30
本篇文章主要介绍了vue时间格式化实例代码，这里整理了详细的代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue filter格式化时间戳时间成标准日期格式
CodingNoob
07-04 1万+
调用实例：yyyy-MM-dd或者yyyy-MM-dd hh:mm:ss进行格式 &lt;div&gt;{{data | dataFormat('yyyy-MM-dd hh:mm:ss')}}&lt;/div&gt; 代码： import Vue from 'vue' Vue.filter('dataFormat', function (value, fmt) { let getDat...
使用Vue的filter过滤时间格式（转载）
weixin_49271180的博客
07-25 252
———————————————— 版权声明：本文为CSDN博主「Maple__Leaf_」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/Maple__Leaf_/java/article/details/107535347 ...
vue 过滤时间日期
^_^
06-07 954
过滤器本身就是一个函数 ，把内容转换成另一种格式 例如 把时间转换为相对时间 使用场景 过滤时间 一、局部过滤器 filters: { 过滤器名 (要被处理的值) { // .... return 处理后的结果 } } 二、全局过滤器 Vue.filter('过滤器名'， (oldVal) => { // ... return 处理后的结果 }) 三、使用过滤器 {{ 原数据 | 过滤器名 }} // 相当于 {{ 过滤器名(原数据) }...
vue使用过滤器过滤日期
sunrj_niu的博客
12-16 752
vue使用过滤器过滤日期： padStart方法，是用来判读是否是两位，不是两位，则补0
【js】vue时间格式转化
Legolas4的博客
08-28 1327
http://blog.csdn.net/qinchaidaren/article/details/76163750 https://segmentfault.com/q/1010000005750040 http://momentjs.com/
vue1.js 过滤器_Vue.js的简单日期时间过滤器
cuk5340的博客
07-31 464
vue1.js 过滤器 Vue过滤器日期格式 (vue-filter-date-format) Simple datetime filter for Vue.js. Vue.js的简单日期时间过滤器。 安装 (Installation) install from npm 从npm安装 $ npm install vue-filter-date-format and register in...
处理时间戳的实战过滤器
lbw130的博客
04-27 112
filters: { //过滤器 用于格式化时间 formatData(value) { var date = new Date(parseInt(value)); // date.setTime(value); var month = date.getMonth() + 1;...
vue过滤器时间格式化
07-27
Vue过滤器可以用来格式化时间。下面是一个示例，展示如何使用Vue过滤器来格式化时间： 首先，在Vue组件中定义一个过滤器： ```javascript // 在Vue组件的定义中 filters: { formatDate(value) { // 使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值