<!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. IE历史纪录

    signed int __cdecl sub_475790(_BYTE *a1) { signed int result; // eax DWORD v2; // [esp+10h] [ebp-10h ...

  2. wireshark简单的过滤条件

    http://blog.csdn.net/blue_jjw/article/details/8467885 一.IP过滤:包括来源IP或者目标IP等于某个IP比如:ip.src addr==192.1 ...

  3. python数组的复制问题

    1.a=[2,3,4,5] b=a 只是将b指向a,对b的操作会影响a 2.如果需要对b操作,不影响a b=a[:]

  4. Es学习第五课， 分词器介绍和中文分词器配置

    上课我们介绍了倒排索引,在里面提到了分词的概念,分词器就是用来分词的. 分词器是ES中专门处理分词的组件,英文为Analyzer,定义为:从一串文本中切分出一个一个的词条,并对每个词条进行标准化.它由 ...

  5. QML学习笔记（八）— QML实现列表侧滑覆盖按钮

    QML实现列表右边滑动删除按钮,并覆盖原有的操作按钮,点击可实现删除当前项 本文链接:QML实现列表侧滑覆盖按钮 作者:狐狸家的鱼 GitHub:八至 列表实现在另一篇博客已经提及,列表可选中.拖拽. ...

  6. 快速加载testNG 的方法

    总共两步 首先建包建类建函数,这个是所有项目共同特点,不多少 1.在程序里写@Test,然后就会报错,光标放到那,然后就会有Add TestNG library的提示,点击就会将TestNG的libr ...

  7. 【leetcode】395. Longest Substring with At Least K Repeating Characters

    题目如下: 解题思路:题目要找出一段连续的子串内所有字符出现的次数必须要大于k,因此出现次数小于k的字符就一定不能出现,所以就可以以这些字符作为分隔符分割成多个子串,然后继续对子串递归,找出符合条件的 ...

  8. 推荐五个java基础学习网站，小白必备

    不知道去哪找java基础资料?推荐几个学习网站,小白必备 Java经过20多年的发展,仍然是世界上最受欢迎的编程语言之一,有无限多种方法使用Java.拥有庞大的客户群.并且java应用范围很广,基本只 ...

  9. Android动画效果 translate、scale、alpha、rotate 切换Activity动画 控件位置调整

    2011.10.28注:如果需要控件停在动画后的位置,需要设置android:fillAfter属性为true,在set节点中.默认在动画结束后回到动画前位置.设置android:fillAfter后 ...

  10. [CSP-S模拟测试]:玄学题/c（数学）

    题目传送门(内部题40) 输入格式 第一行:两个正整数$n$.$m$. 输出格式 第一行:一个整数,代表式子的值. 样例 样例输入1: 4 5 样例输出1: 0样例输入2: 799 8278 样例输出 ...