<!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. 转 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight

    1.top 此属性仅仅在对象的定位(position)属性被设置时可用.否则,此属性设置会被忽略. 复制代码 代码如下: <div style=" position:absolute; ...

  2. jsp获取url路径的方法

    如果你请求的URL是  http://localhost:8080/demo/Index.jsp request.getScheme() //输出:http request.getServerName ...

  3. Rectangle类详解

    一,概括: 乍一看,可能感觉是一个矩形类,矩形类就是画一个长方形吗??这是我一开始见到这个类的感觉. 其实不是的Rectangle是一个“区域”类,它的最大作用就是定义一个矩形的区域,如果问为什么是矩 ...

  4. boost库：函数对象

    函数对象是指那些可以被传入到其它函数或是从其它函数返回的一类函数. 1. boost::bind bind提供了一个机制,是函数与几乎不限数量的参数一起使用,就可以得到指定签名的函数.bind会复制传 ...

  5. Vue.config.optionMergeStrategies 用法分析

    举个例子,假设有个对象,他叫objA, 技能是说hello,他喜欢的女生叫小花,但是他是一个花心的人! objA = { name: 'objA ', sayHello_ () { console.l ...

  6. String Algorithm Summary - 1

    目录 Suffix Array Summay 单个字符串问题 两个字符串问题 多个字符串问题 AC-Automaton Summary 求长度为n(2e9)不包含给定字符串的合法串个数 包含至少一个词 ...

  7. Android 测试点归纳总结

    前言 除了测试平台工具,业务测试的总结和思考同样重要,这里总结了一些Android测试知识点,可以辅助业务测试快速形成测试用例和检查点,当作抛砖引玉分享给大家.如有思考不全面的地方,欢迎大家指出来. ...

  8. Excel表格文本格式的数字和数字格式如何批量转换

    Excel表格文本格式的数字和数字格式如何批量转换 在使用Excel表格对数据求和时,只能对单元格内常规格式的数据进行计算,而不能对单元格中的文本格式的数据进行计算,特点就是在单元格的左上角有一个绿色 ...

  9. MySQL配置(二）

    上篇文章简单的讲了一下MySQL的配置,这章我在具体讲述一下我所配置的一些内容. 一.密码策略        MySQL5.7默认安装了密码安全检查的插件.默认密码检查策略要求密码必须包含:大小写字母 ...

  10. NIO浅析（一）

    一:NIO与IO的区别 1.NIO面对的是缓冲区,IO面对的是流 2.NIO是非阻塞的,IO是阻塞的 3.NIO中引入了选择器 二:既然NIO面对的是缓冲区,那就先来了解缓冲区 1.NIO中Buffe ...