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/ 因为没有使用过,所有就开始各种百度,参考各位大 ...
随机推荐
- React全栈-社交网络程序 提交表单数据
1. 给每个input 表格添加change 事件 当input 变化时触发 <div className="form-group"> <input type= ...
- hadoop HA集群的安装
1.hadoop集群规化 ip 主机名 安装软件 角色 运行进程 10.124.147.22 hadoop1 jdk.zookeeper.hadoop namenode/zookeeper/jobhi ...
- TCP三次握手过程和四次释放
TCP是面向连接的协议 客户端发送 SYN包,和随机数SEQ.此时客户端是SYN_SENT状态. 服务器返回SYN+ACK,和随机数SEQ, rwnd是告诉客户端我可以接收多少字节.此时服务器端是SY ...
- Code First 延迟装入特性
使用ORM框架,基本上都会添加“延迟装入”的特性支持,当使用Entity Framwork 的objectContext与DbContext操作数据时,默认都使用“延迟装入”,也就是当我们在应用程序里 ...
- CSS分组和嵌套选择器
CSS 分组 和 嵌套 选择器 分组选择器 在样式表中有很多具有相同样式的元素.直线模组哪家好 h1 { color:green; } h2 { color:green; } p { ...
- linux IPC 消息队列（二）
我在网上想找多进程之间的通信方式,发现有人写的消息队列很好,搬过来: common.h #ifndef __COMMON_H_ #define __COMMON_H_ #include <std ...
- sql server 建表，增删改练习
use master --drop database Class create database Class on primary( name='Class', filename='D:\SQLTes ...
- Database基础(三)：SQL数据导入/导出、 操作表记录、查询及匹配条件
一.SQL数据导入/导出 目标: 使用SQL语句完成下列导出.导入操作: 将/etc/passwd文件导入userdb库userlist表并给每条记录加编号 将userdb库userlist表中UID ...
- 如何做LR自动关联和手动关联？
一.什么时候需要关联 1.关联的含义 关联的含义A(correlation):在脚本回放过程中,客户端发出请求,通过关联函数所定义的左右边界值(也就是关联规则),在服务器所响应的内容 ...
- [CSP-S模拟测试]:简单的区间（分治）
题目描述 给定一个长度为$n$的序列$a$以及常数$k$,序列从$1$开始编号.记$$f(l,t)=\sum \limits_{i=l}^ra_i-\max \limits_{i=l}^r\{a_i\ ...