过滤器案例：格式化日期

最新推荐文章于 2021-05-03 19:29:04 发布
最新推荐文章于 2021-05-03 19:29:04 发布
阅读量299 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45424679/article/details/113927768
版权

Vue.js 过滤器 日期格式化 JavaScript 前端开发
关键词由CSDN通过智能技术生成 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>{{date | format('yyyy-MM-dd hh:mm:ss')}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      过滤器案例：格式化日期
      
    */
    // Vue.filter('format', function(value, arg) {
    //   if(arg == 'yyyy-MM-dd') {
    //     var ret = '';
    //     ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();
    //     return ret;
    //   }
    //   return value;
    // })
    Vue.filter('format', function(value, arg) {
      function dateFormat(date, format) {
          if (typeof date === "string") {
              var mts = date.match(/(\/Date\((\d+)\)\/)/);
              if (mts && mts.length >= 3) {
                  date = parseInt(mts[2]);
              }
          }
          date = new Date(date);
          if (!date || date.toUTCString() == "Invalid Date") {
              return "";
          }
          var map = {
              "M": date.getMonth() + 1, //月份 
              "d": date.getDate(), //日 
              "h": date.getHours(), //小时 
              "m": date.getMinutes(), //分 
              "s": date.getSeconds(), //秒 
              "q": Math.floor((date.getMonth() + 3) / 3), //季度 
              "S": date.getMilliseconds() //毫秒 
          };

          format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
              var v = map[t];
              if (v !== undefined) {
                  if (all.length > 1) {
                      v = '0' + v;
                      v = v.substr(v.length - 2);
                  }
                  return v;
              } else if (t === 'y') {
                  return (date.getFullYear() + '').substr(4 - all.length);
              }
              return all;
          });
          return format;
      }
      return dateFormat(value, arg);
    })
    var vm = new Vue({
      el: '#app',
      data: {
        date: new Date()
      }
    });
  </script>
</body>
</html>
故事只若初见
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue过滤器实现日期格式化的案例分析
11-20
说明 今天将要介绍的是vue中的过滤器，并且将实现一个日期格式化的小案例。 大家都知道，我们获取当前日期可以通过Date对象获取。下面我将获取当前时间并打印出来。 console.log(new Date()); 我们获取的是一个标准时间，控制台的输出如下所示。 在实际项目开发中，我们通常获取标准时间后不是直接拿来使用，而是要进行一些操作然后将它显示在页面中，我们将这些操作称作时间格式化。 过滤器 在vue中，我们可以使用过滤器来进行时间格式化。它的写法如下： // Vue.filter(过滤器名称,处理函数) 使用的方式 {{ 过滤器数据| 过滤器名称 }} 具体代码 代码如下
带参数的过滤器|| 过滤器案例：格式化日期|| time.js  ||
qq_39368007的博客
04-09 180
带参数的过滤器 过滤器案例：格式化日期 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"...
vue 实现 使用过滤器格式化日期 案例
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
01-19 653
案例要求 使用过滤器格式化日期 案例讲解 查看未过滤格式化的日期格式 设置模板函数format 接收日期值和日期格式 按照日期格式对日期进行拼接并返回值 将拼接好的日期显示在页面上 最终案例效果 代码 设置日期显示格式 <div id="app"> <div>{{date }}</div> <div>{{date | format('yyyy-MM-dd')}}</div> <div&g
过滤器（格式化日期）
快乐学代码
05-03 213
过滤器（格式化日期） 代码如下 <script> /** * 对日期进行格式化， * @param date 要格式化的日期 * @param format 进行格式化的模式字符串 * 支持的模式字母有： * y:年, * M:年中的月份(1-12), * d:月份中的天(1-31), * h:小时(0-23), * m:分(0-59), * s:秒(0-59), * S:毫秒(0-999)
ElasticSearch 学习案例
09-22
例如，要根据用户 ID 搜索帖子，我们可以使用 `term` 过滤器，它会直接匹配索引中的值，无需分词。这在寻找特定 ID 或者其他精确值时非常有用。同样，若要搜索未隐藏的帖子，只需将 `hidden` 字段的值设置为 `false`...
Android 地区和日期选择器.zip
07-10
3. **日期选择器逻辑**：日期选择器需要处理日期的增减、合法性验证（例如闰年检查）、格式化输出等功能。在Android中，这通常涉及到`java.util.Calendar`和`java.text.SimpleDateFormat`类。开发者可能还会使用`...
eTracker:费用追踪器
06-02
5. **搜索与过滤**：用户可按日期、金额范围或特定类别快速查找历史记录，便于回顾和分析特定时段的支出。 6. **导出报告**：为了方便进一步的数据分析，eTracker还提供了导出数据的功能，用户可以将费用记录导出为...
过滤器格式化时间
littlefire_233的博客
10-12 226
// vue 过滤器 <div class="debug">{{states[0].time|date('yyyy-MM-dd mm')}}</div>
Vue过滤器的基本使用
qweryitao的博客
11-11 153
过滤器的基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.staticfile.org/vue/2.6.10/vue.j...
过滤器及应用实例（显示格式化的日期时间）
qq_44571236的博客
01-22 567
理解过滤器 功能: 对要显示的数据进行特定格式化后再显示 注意: 并没有改变原本的数据, 只是产生新的对应的数据 定义和使用过滤器 定义过滤器 Vue.filter(filterName, function(value[,arg1,arg2,...]){ // 进行一定的数据处理 return newValue }) 使用过滤器 <div>{{myData | filte...
js将日期格式转为标准格式“yy-mm-dd”
weixin_44221744的博客
02-26 1040
引入该方法，传入需要转化的日期（任何格式都行） let str=getTime（“Tue Feb 20 2018 04:30:00 GMT+0800 (中国标准时间)”） let str=getTime（“2018-02-19T12:00:00-08:30”）//utc格式 export function getTime(ev: string,state:boolean=true) { //state true 只要年月 ,false全部包括时分秒 const dateTime = new D.
【vue案例】vue带参数的过滤器实现日期格式化（yyyy-MM-dd）
马云
11-01 1420
vue过滤器实现日期格式化 文章目录vue过滤器实现日期格式化获取当前时间格式化当前时间完整代码 利用带参数的过滤器实现当前日期格式化 获取当前时间 <div>{{date}}</div> data: { date:new Date() } 格式化当前时间 利用带参数的过滤器，format中的参数由过滤器中的arg得到 <div>{{date | format('yyyy-MM-dd')}}</div> Vue.filter('format',f
vue过滤器实现日期格式化
我有一个梦的博客
07-01 3151
说明 今天将要介绍的是vue中的过滤器，并且将实现一个日期格式化的小案例。 大家都知道，我们获取当前日期可以通过Date对象获取。下面我将获取当前时间并打印出来。 console.log(new Date()); 我们获取的是一个标准时间，控制台的输出如下所示。 在实际项目开发中，我们通常获取标准时间后不是直接拿来使用，而是要进行一些操作然后将它显示在页面中，我们将这些操作称作时间格式化。 过滤器 在vue中，我们可以使用过滤器来进行时间格式化。它的写法如下： // Vue.filter(过滤器名称,处
Vue过滤器
码小余の博客
11-02 1950
Vue过滤器 自定义过滤器 // 首字母大写 Vue.filter("upper", function(val){ return val.charAt(0).toUpperCase() + val.slice(1) }) // 首字母小写 Vue.filter("lower", function(val){ return val.charAt(0).toLowerCase() + val.slice(1) }) const app = new Vue({ el: "#app",
django 过滤器 、日期格式化参数
热门推荐
xyp84的专栏
09-05 4万+
django1.4 html页面从数据库中读出DateTimeField字段时，显示的时间格式和数据库中存放的格式不一致，比如数据库字段内容为2012-08-26 16:00:00，但是页面显示的却是Aug. 26, 2012, 4 p.m. 为了页面和数据库中显示一致，需要在页面格式化时间，需要添加{{ dayrecord.p_time|date:"Y-m-d H:i:s" }} 类似的过滤
全局过滤器,进行时间的格式化
Half of if的博客
04-21 398
//全局过滤器,进行时间的格式化 Vue.filter('dateFormat',function(datastr){ var patter="yyyy-mm-dd hh:mm:ss" var dt=new Date(datastr); //yyyy-mm-dd var y=dt.getFullYear(); ...
自定义过滤器格式化时间
zhang的博客
07-17 604
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;Title&lt;/title&gt;     &lt;script src="vue.js"&gt;&lt;/sc
b050闲置图书分享-springboot+vue+elementui.zip（可运行源码+sql文件+文档）
最新发布
07-23
本次开发的闲置图书分享平台实现了收货地址管理、字典管理、公告管理、留言板管理、图书管理、图书收藏管理、图书评价管理、图书订单管理、用户管理、管理员管理等功能。系统用到了关系型数据库中王者MySql作为系统的数据库，有效的对数据进行安全的存储，有效的备份，对数据可靠性方面得到了保证。并且程序也具备程序需求的所有功能，使得操作性还是安全性都大大提高，让闲置图书分享平台更能从理念走到现实，确确实实的让人们提升信息处理效率。 管理图书的数据，此页面主要实现图书的增加、修改、删除、查看的功能。公告信息管理页面提供的功能操作有：新增公告，修改公告，删除公告操作。公告类型管理页面显示所有公告类型，在此页面既可以让管理员添加新的公告信息类型，也能对已有的公告类型信息执行编辑更新，失效的公告类型信息也能让管理员快速删除。
Jdonjive源码解析：深入理解论坛过滤器设计与实现
可缓存的过滤器如Java代码格式化，其结果不会随时间变化，而不能缓存的过滤器如日期相关的标签，其结果会随着用户查看时间的改变而更新。文章指出，Jdonjive在处理多个不能缓存的过滤器时存在潜在的错误缓存问题，这...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

故事只若初见

坚持就是胜利

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值