<!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. vue 如何读取编译携带的参数

    vue 环境有很多套,我们需要根据不同环境设置不同的一些参数,如何不装任何依赖的情况下获取参数 下面是我制作官网,需要根据开发还是生产环境配置不同CDN,用vue-cli2+webpack,配置是再: ...

  2. 一、创建且运行JPA工程

    1. 创建JPA 工程 (1)选择创建 JPA Project,注意不是Java Project (2)JPA version选择 2.0 (3)选择用户库,否则会出现 At least one us ...

  3. Python第一章概述与环境安装

    Python简介 Python是一种计算机程序设计语言.是一种动态的.面向对象的脚本语言,最初被设计用于编写自动化脚本(shell),随着版本的不断更新和语言新功能的添加,越来越多被用于独立的.大型项 ...

  4. Java高频经典面试题（第一季）一：自增的分析

    package will01; public class testZiZeng { public static void main(String[] args) { int i = 1; i = i ...

  5. ganglia监控部署

    1.ganglia组件 ganglia 相比于falcon和zabbix主要在于集群的状态集中显示,可以很便捷的对比各主机的性能状态. gmond:相当于是agent端,主要用于收集各node的性能状 ...

  6. Quartz.Net 任务调度之简单任务(1)

    本文github链接 https://github.com/sunshuaize/cnBlogDemos/tree/master/Quartz.Net%20%E4%BB%BB%E5%8A%A1%E8% ...

  7. shell cut从一个文件中提取列

    cut 语法 cut -d 分隔符 -f 列索引 file.txt #将文件file.txt以分隔符.进行分割,并取出第2列.cut -d '.' -f 3- file.txt #将文件file.tx ...

  8. 那些长短不一的PCI-E插槽都有什么不一样？

    https://www.ednchina.com/news/20171121-PCI-E.html 时间:2017-11-21   目前PCI-E插槽已经成为了主板上的主力扩展插槽,除了显卡会用到P ...

  9. js的 算法 和 数据结构

    js的 算法 1.对一个对象数组按照对象某个属性进行排序  : https://www.cnblogs.com/webcabana/p/7460038.html 在做公交的项目中就碰到过这种算法问题, ...

  10. [Repost] 悬线法

    <浅谈用极大化思想解决最大子矩形问题>作者:王知昆 首先,根据定理1:最大有效子矩形一定是一个极大子矩形.不过与前一种算法不同的是,我们不再要求每一次枚举的一定是极大子矩形而只要求所有的极 ...