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/ 因为没有使用过,所有就开始各种百度,参考各位大 ...
随机推荐
- Yum与RPM
Yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器.基于RPM包管理,能够从指定的服务器自动下载 ...
- Qt + VS 【如何添加图片资源】
熟悉qt creator,之后发现其debug能力不如vs强,随后转战 qt + vs. 发现图片资源添加不像qt那样直接添加,vs本身会生成一个qrc,我们可以直接去打开然后添加,不必在自己去添加, ...
- maven知识
首先下载maven 然后win的配置环境变量 maven目录结构 --main --java --package --test --java --package resources maven 需要有 ...
- python3 实现简单ftp服务功能（服务端 For Linux）
转载请注明出处! 功能介绍: 可执行的命令: lspwdcd put rm get mkdir 1.用户加密认证 2.允许多用户同时登陆 3.每个用户有自己的家目录,且只可以访问自己的家目录 4.运行 ...
- docker 运行jenkins及vue项目与springboot项目(四.docker运行nginx)
docker 运行jenkins及vue项目与springboot项目: 一.安装docker 二.docker运行jenkins为自动打包运行做准备 三.jenkins的使用及自动打包vue项目 四 ...
- 企业实践 | 如何更好地使用 Apache Flink 解决数据计算问题？
业务数据的指数级扩张,数据处理的速度可不能跟不上业务发展的步伐.基于 Flink 的数据平台构建.运用 Flink 解决业务场景中的具体问题等随着 Flink 被更广泛的应用于广告.金融风控.实时 B ...
- ofbiz webservice 例解
1.定义controller.xml文件,controller文件:ofbiz当前项目的所有请求的入口,通过对应request-map:将所有的请求uri对应到指定的处理函数上. <reques ...
- win10配置 samba
一.先確認Linux中smb正確配置可以使用命令smbclient -L //localhost/ 二.win10配置1.打開win10對smb1.0/cifs檔共用支援2.本地群組原則編輯,修改如下 ...
- （转）使用OpenGL ES显示图像
编写:jdneo - 原文:http://developer.android.com/training/graphics/opengl/index.html 转:http://hukai.me/and ...
- 2019牛客第八场多校 D_Distance 三维BIT或定期重建套路
目录 题意: 分析: @(2019牛客暑期多校训练营(第八场)D_Distance) 题意: 在三维空间\((n\times m\times h\le 100000)\)内,有\(q(q\le 100 ...