<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>Vue filters</title>

     </head>

     <body>

         <div id="app">

             {{ date | formDate }}

         </div>

         <!-- 开发环境版本，包含了用帮助的命令行警告 -->

         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

         <script type="text/javascript">

             var padDate = function(value) {

                 return value < 10 ? '0' + value : value;

             };

             var app=new Vue({

                 el:'#app',

                 data:{

                     date: new Date()

                 },

                 filters: {

                     formDate: function(value) {//value即为需要过滤的数据

                         var date = new Date(value);

                         var year = date.getFullYear();

                         var month = padDate(date.getMonth() + 1);

                         var day = padDate(date.getDate());

                         var hours = padDate(date.getHours());

                         var minutes = padDate(date.getMinutes());

                         var secondes = padDate(date.getSeconds());

                         //返回整理好的数据

                         return year + '-' + month + '-' + day + '  ' + hours + ':' + minutes + ':' + secondes;

                     }

                 },

                 mounted: function() {

                     var _this = this;//声明一个变量指向Vue实例this,保证作用域一致

                     this.timer = setInterval(function() {

                         _this.date = new Date();//修改数据date

                     }, 1000)

                 },

                 beforeDestroy: function() {

                     if(this.timer) {

                         clearInterval(this.timer);//在Vue实例销毁前，清除定时器

                     }

                 }

             })

         </script>

     </body>

 </html>

vue filters 日期的更多相关文章

  1. vue filters中使用data中数据

    vue filters中 this指向的不是vue实例,但想要获取vue实例中data中的数据,可以采用下面方法.在 beforeCreate中将vue实例赋值给全局变量app0,然后filters中 ...

  2. vue filters 时间戳转化成时间格式

    vue filters 时间戳转化成时间格式 filters: { formatDate: function (time) { var re = /-?\d+/ var m = re.exec(tim ...

  3. vue filters过滤器

    vue filters过滤器 vue.js允许我们自定义过滤器,可被使用于一些常见的文本格式化,过滤器可以用在两个地方,双花括号插值和 v-bind表达式.最常见的就是双花括号插值. 比如如下代码:{ ...

  4. vue自定义日期组件

    vue-datepicker 基于 vuejs 2.x 可自定义主题的日期组件 github Usage 只需要在项目中加入 calendar.vue,就可以使用了. 向组件传入 prop 即可改变 ...

  5. vue element-ui 日期选择器组件 日期时间格式化

    vue element-ui 组件开发大大提高了我们的效率,但有时候并不能满足我们的需求,例如时间,日期组件: element-ui 日期返回的格式是这样的,看下图: 但我们要的是另一个格式 , 如下 ...

  6. VueJS自定义过滤器:new Vue({filters:{filter1:function(){}....}})

    Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化. 语法 <!-- 在两个大括号中 --> {{ message | capitalize }} <!-- 在 v-bin ...

  7. Vue -- filters 过滤器、倒计时效果

    局部过滤器 时间.***号 <div id="wrapper" class="wrapper" style="display: none;&qu ...

  8. vue filters过滤

    <template> <div class="filters"> <h1 v-text="filtersTitle">< ...

  9. Vue引入日期格式插件moment.js

    因为需求需要,接口传递过来的日期格式是一个时间戳,因此需要进行格式转换,老大给了插件地址,让我自己研究 插件地址:http://momentjs.cn/ 因为没有使用过,所有就开始各种百度,参考各位大 ...

随机推荐

  1. 力扣——remove element（删除元素） python实现

    题目描述: 中文: 给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) ...

  2. 【leetcode】984. String Without AAA or BBB

    题目如下: Given two integers A and B, return any string S such that: S has length A + B and contains exa ...

  3. 常见算法和数据结构存在的坑（updating）

    数组: c++数组下标都+5会稳. 50005000的别开60006000. 二分: 实数二分可能因为神马精度问题出现了不满足二分序的情况,要小心. 注意二分完后,不能直接用当前数组里存的值,要pd( ...

  4. <Jmeter入门不放弃>之<2.常用功能>

    大家这里参考学习的时候,我就不在这里配截图了,因为需要你打开工具根据文档自己去找,才有印象,大家一定要启动JMeter!跟着理解操作 一.测试计划 用来描述一个性能测试,所有内容都是基于这个计划,这谁 ...

  5. 送礼物(二分加双向DFS)

    题目链接 题意:给你n个礼物重量,给你一个M力量,看你一次性搬动不超过M的礼物重量. 思路:看似背包,但M太大.所以要用DFS,但n也有45,所以考虑双向DFS先搜前半部分满足情况的所有重量,然后去重 ...

  6. AcWing 217. 绿豆蛙的归宿 （概率期望+拓扑排序）打卡

    给出一个有向无环的连通图,起点为1,终点为N,每条边都有一个长度. 数据保证从起点出发能够到达图中所有的点,图中所有的点也都能够到达终点. 绿豆蛙从起点出发,走向终点. 到达每一个顶点时,如果有K条离 ...

  7. flutter 接入阿里云OSS

    之前因为使用正常文件上传,用户多时拥堵无法正常上传,因此接入阿里OSS 来解决这个问题.本来打算整原生那块,看了下比较麻烦,用flutter dio 直接请求oss 完成 1.上传用到了image_p ...

  8. JS基础入门篇（二十四）—DOM（上）

    1.常用的节点类型,nodeType,attributes,childNodes. 1.元素节点 - 1 2.属性节点 - 2 3.文本节点 - 3 4.注释节点 - 8 5.文档节点 - 9 查看节 ...

  9. 2019杭电多校第六场hdu6638 Snowy Smile(线段树+枚举)

    Snowy Smile 题目传送门 解题思路 先把y离散化,然后把点按照x的大小进行排序,我们枚举每一种x作为上边界,然后再枚举其对应的每一种下边界.按照这种顺序插入点,这是一个压维的操作,即在线段树 ...

  10. PAT甲级——1147 Heaps【30】

    In computer science, a heap is a specialized tree-based data structure that satisfies the heap prope ...