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/ 因为没有使用过,所有就开始各种百度,参考各位大 ...
随机推荐
- python 常用技巧 — 列表（list）
目录: 1. 嵌套列表对应位置元素相加 (add the corresponding elements of nested list) 2. 多个列表对应位置相加(add the correspond ...
- jQuery判断checkbox是否选中的4种方法
方法一: ).checked) { // do something } 方法二: if($('#checkbox-id').is(':checked')) { // do something } 方法 ...
- UNP学习第八章udp
一.基本UDP套接口编程 #include <sys/socket.h> ssize_t recvfrom(int sockfd, void *buff, size_t nbytes, i ...
- LA 3971 Assemble（二分）
题目: 给你b元钱,让你组装一台电脑,有n个配件,属性有 种类 名字 价格 品质,每种类型选至少一个,并且最小品质最大.输出这个最大的最小品质. 白书上说了,最小值最大的问题一般是二分来求解答案.在这 ...
- sql server 基础语法2
别名,选择,查询,排序,去重,筛选 select * from UserInfo as ui --起别名 select UserName,UserPwd --指定选择的列 from UserInfo ...
- AcWing 208. 开关问题 （高斯消元+状压）打卡
有N个相同的开关,每个开关都与某些开关有着联系,每当你打开或者关闭某个开关的时候,其他的与此开关相关联的开关也会相应地发生变化,即这些相联系的开关的状态如果原来为开就变为关,如果为关就变为开. 你的目 ...
- Fidder的使用
默认的header是类似这样的 User-Agent: Fiddler Host: localhost Content-Length: 34 只需要改成这样的 User-Agent: Fiddler ...
- 四. jenkins部署springboot项目(1)--window环境
前提:jenkins和springboot运行在同一台机器 springboot项目使用git和maven jenkins所需的插件如Maven,Git等这里就不再详述. 1.jenkins配置git ...
- 52、saleforce 第一篇
View the Schema 1.点击setup 2.在QuickFind and Search中输入Schema Builder 先点击clear all 去除所有现实的UML,然后选择Line_ ...
- ubuntu 开机启动shell脚本
1.创建shell启动脚本test 2.将启动脚本复制到 /etc/init.d 目录下 3.设置脚本文件权限 sudo chmod 755 /etc/init.d/test 4.设置脚本启动 sud ...