vue filters 日期
<!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 日期的更多相关文章
- vue filters中使用data中数据
vue filters中 this指向的不是vue实例,但想要获取vue实例中data中的数据,可以采用下面方法.在 beforeCreate中将vue实例赋值给全局变量app0,然后filters中 ...
- vue filters 时间戳转化成时间格式
vue filters 时间戳转化成时间格式 filters: { formatDate: function (time) { var re = /-?\d+/ var m = re.exec(tim ...
- vue filters过滤器
vue filters过滤器 vue.js允许我们自定义过滤器,可被使用于一些常见的文本格式化,过滤器可以用在两个地方,双花括号插值和 v-bind表达式.最常见的就是双花括号插值. 比如如下代码:{ ...
- vue自定义日期组件
vue-datepicker 基于 vuejs 2.x 可自定义主题的日期组件 github Usage 只需要在项目中加入 calendar.vue,就可以使用了. 向组件传入 prop 即可改变 ...
- vue element-ui 日期选择器组件 日期时间格式化
vue element-ui 组件开发大大提高了我们的效率,但有时候并不能满足我们的需求,例如时间,日期组件: element-ui 日期返回的格式是这样的,看下图: 但我们要的是另一个格式 , 如下 ...
- VueJS自定义过滤器:new Vue({filters:{filter1:function(){}....}})
Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化. 语法 <!-- 在两个大括号中 --> {{ message | capitalize }} <!-- 在 v-bin ...
- Vue -- filters 过滤器、倒计时效果
局部过滤器 时间.***号 <div id="wrapper" class="wrapper" style="display: none;&qu ...
- vue filters过滤
<template> <div class="filters"> <h1 v-text="filtersTitle">< ...
- Vue引入日期格式插件moment.js
因为需求需要,接口传递过来的日期格式是一个时间戳,因此需要进行格式转换,老大给了插件地址,让我自己研究 插件地址:http://momentjs.cn/ 因为没有使用过,所有就开始各种百度,参考各位大 ...
随机推荐
- webshell yar
webshell D盾 http://www.d99net.net/
- log4j.xml配置详解(转)
转自:http://willow-na.iteye.com/blog/347340 Xml代码 <?xml version="1.0" encoding="UTF- ...
- Navicat连接MySQL8+时出现2059报错
当我们连接时,会报2059错误 在用navicat连接MySQL8+时会出现2059错误,这是由于新版本的MySQL使用的是caching_sha2_password验证方式,但此时的navicat还 ...
- docker 数据持久化
confluence #!/bin/bash docker run \ --name confluence \ --volume "$PWD/data/opt":/opt \ -- ...
- Ceph的正确玩法之Ceph纠删码理论与实践
http://blog.itpub.net/31545808/viewspace-2637083/ 注意空格,有的命令少空格 随着云计算业务的快速发展,国内外云计算企业的专利之争也愈发激烈.在云计算这 ...
- BlueStore-先进的用户态文件系统《一》
https://zhuanlan.zhihu.com/p/45084771 分布式存储系统通过将数据分散到多台机器上来充分利用多台机器的资源提高系统的存储能力,每台机器上的数据存放都需要本地的单机存储 ...
- bzoj 3251
http://www.lydsy.com/JudgeOnline/problem.php?id=3251 这道题在北京八十中的时候有人讲过.. 不过由于自己continue 写掉了一个所以调了很久. ...
- 2019牛客多校第五场 B - generator 1 矩阵快速幂+十倍增+二进制倍增优化
B - generator 1 题意 给你\(x_{0}.x_{1}.a.b.b.mod\),根据\(x_{i} = a*x_{i-1} + b*x_{i-2}\)求出\(x_{n}\) 思路 一般看 ...
- GIT上传下载报错：[You do not have permission to pull from the repository]的解决方案！
第一步:打开我的电脑 第二步:选择此电脑,右击弹出框点击属性进入控制面板 第三步:进入控制面板 第四步:搜索管理凭据 第五步:编点击右侧按钮,进行编辑用户名和密码的操作添加凭据 git:https:/ ...
- 【Tomcat】1.Tomcat在Windows系统的安装和使用
1.下载与安装 安装Tomcat的[前提条件]是安装好JDK或者JRE(本文略过)Tomcat在Windows系统中可以通过[压缩包]或[安装包]来安装建议使用[安装包]来简化安装步骤登录官网http ...