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/ 因为没有使用过,所有就开始各种百度,参考各位大 ...
随机推荐
- 三、Centos7安装Mysql
1.到服务器下载的链接 wget https://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm 2.执行命令 sudo r ...
- Hadoop（一）阿里云hadoop集群配置
集群配置 三台ECS云服务器 配置步骤 1.准备工作 1.1 创建/bigdata目录 mkdir /bigdatacd /bigdatamkdir /app 1.2修改主机名为node01.node ...
- Security Spring 配置
<?xml version="1.0" encoding="UTF-8"?><beans:beans xmlns="http://w ...
- 【集群】Redis哨兵（Sentinel）模式
主从切换技术的方法是:当主服务器宕机后,需要手动把一台从服务器切换为主服务器,这就需要人工干预,费事费力,还会造成一段时间内服务不可用.这不是一种推荐的方式,更多时候,我们优先考虑哨兵模式. 一.哨兵 ...
- bzoj 3251
http://www.lydsy.com/JudgeOnline/problem.php?id=3251 这道题在北京八十中的时候有人讲过.. 不过由于自己continue 写掉了一个所以调了很久. ...
- webpack 导出、导入模块（及路径）
参考:https://blog.csdn.net/xyphf/article/details/83411552 (下面的代码亲测有效) 注:导入的模块的方法,只有两种方法 import 和 requ ...
- hasvalue vs !=null
Which is preferred: Nullable<T>.HasValue or Nullable<T> != null? The compiler replaces n ...
- SpringBoot之Spring@Value属性注入使用详解
在使用Spring框架的项目中,@Value是使用比较频繁的注解之一,它的作用是将配置文件中key对应的值赋值给它标注的属性.在日常使用中我们常用的功能都比较简单,本篇文章系统的带大家来了解一下@Va ...
- CenterOS 设置静态IP
本文主要介绍这样再CenterOS 中设定静态IP. 工具 centerOS 6.9 步骤 执行命令:vi /etc/sysconfig/network-scripts/ifcfg-eth0 编辑,填 ...
- 驱动中PAGED_CODE的作用
参考:http://blog.csdn.net/broadview2006/article/details/4171397 里面的内容出自<Windows内核情景分析> 简而言之,Wind ...