vue.js处理时间
来源:互联网 发布:剑三萝莉精致捏脸数据 编辑:程序博客网 时间:2024/05/20 05:10
1.main.js ,全局过滤器。方便使用
import Vue from 'vue'import App from './App'import router from './router'import store from './vuex/index.js'import Vuex from 'vuex'//引入axiosimport axios from 'axios'Vue.prototype.$ajax = axiosVue.use(Vuex)Vue.config.productionTip = false//时间过滤器Vue.filter('time',function (value) { return new Date(parseInt(value) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");})/* eslint-disable no-new */new Vue({ el: '#app', router, store, template: '<App/>', components: { App }})
补充。自定义时间过滤器,还是mainjs里
//时间过滤器Vue.filter('time',function (value) { let cc = new Date(value*1000); return cc.toLocaleString();})Date.prototype.toLocaleString= function () { //这里可以定义想要的类型 return this.getFullYear() + "年" + (this.getMonth() + 1) + "月" + this.getDate() + "日 " + this.getHours() + "点" + this.getMinutes() + "分" + this.getSeconds() + "秒";}
2.页面组件 html部分:使用 | t i m e
<ul class="detail" v-for="ietm in list"> <li>洗衣-{{ietm.clothesType}}</li> <li>完结-{{ietm.serverState}}</li> <li>time:{{ietm.subTime|time}}</li> </ul>
补充。关于自定义过滤器,和美华时间格式
我们从接口获取的时间格式是这样的2016-06-12T06:17:35.453Z,很显然,这不是我们想要的效果.我们想要的效果应该是这样的 发表于2小时之前 这样的效果.怎么做呢?
我们需要一个函数,这个函数的作用是给他一段原始的字符串,然后返回一个我们想要的字符串.
function goodTime(str){ var now = new Date().getTime(), oldTime = new Date(str).getTime(), difference = now - oldTime, result='', minute = 1000 * 60, hour = minute * 60, day = hour * 24, halfamonth = day * 15, month = day * 30, year = month * 12, _year = difference/year, _month =difference/month, _week =difference/(7*day), _day =difference/day, _hour =difference/hour, _min =difference/minute; if(_year>=1) {result= "发表于 " + ~~(_year) + " 年前"} else if(_month>=1) {result= "发表于 " + ~~(_month) + " 个月前"} else if(_week>=1) {result= "发表于 " + ~~(_week) + " 周前"} else if(_day>=1) {result= "发表于 " + ~~(_day) +" 天前"} else if(_hour>=1) {result= "发表于 " + ~~(_hour) +" 个小时前"} else if(_min>=1) {result= "发表于 " + ~~(_min) +" 分钟前"} else result="刚刚"; return result;}
// 使用vue自定义过滤器把接口中传过来的时间进行整形 Vue.filter('time', function (value) { return goodTime(value); }) var vm = new Vue({ el: '#app',// 此处为接口返回的数据 data: data });
补充:
js中处理时间戳。转为我们任何想要的:
得到后台从数据库中拿到的数据我们希望格式是
2016年10月25日 17时37分30秒 或者 2016/10/25 17:37:30
然而我们前台得到的却是一段数字(时间戳,毫秒数)
1477386005
我们要将时间戳转化为我们想要的格式。
核心方法 :
1477386005是我从后台得到时间戳 (注意:有的时候得到的时间戳是已经乘以1000的)
var unixTimestamp = new Date( 1477386005*1000 ) ;commonTime = unixTimestamp.toLocaleString(); alert(commonTime);
这时候的结果是:
但是我希望转换为我自己想要的格式,就在本页面重写一下 toLocaleString()方法即可。
Date.prototype.toLocaleString = function() { return this.getFullYear() + "年" + (this.getMonth() + 1) + "月" + this.getDate() + "日 " + this.getHours() + "点" + this.getMinutes() + "分" + this.getSeconds() + "秒"; };
结果为:
或者其他想要的格式:
Date.prototype.toLocaleString = function() { return this.getFullYear() + "/" + (this.getMonth() + 1) + "/" + this.getDate() + "/ " + this.getHours() + ":" + this.getMinutes() + ":" + this.getSeconds(); };
结果为:
阅读全文
0 0
- vue.js处理时间
- Flask MVVM 开发(vue.js),Javascript 处理时间
- vue.js渲染时间戳
- 【js】vue时间格式转化
- js 时间处理
- js 时间戳处理
- Js 时间处理总结
- JS处理时间大全
- js时间的处理
- js处理时间
- js 时间处理方案
- js时间日期处理
- JS处理时间问题
- JS处理时间
- js时间格式处理
- js-时间处理
- vue.js时间戳格式转换
- 3.vue.js迭代处理数组
- ssh框架搭建
- PL/SQL导出dmp文件,Oracle11g遇见空表无法导出的问题
- jQuery之$(document).ready()使用介绍
- ADMA3学习
- spark性能调优之数据本地化
- vue.js处理时间
- spring boot redis 接入笔记
- 欢迎使用CSDN-markdown编辑器
- Java toString方法重载的作用
- 微信小程序如何引入外部字体库 Iconfont
- 简易日期组件
- javascript 方法中的参数字符串如何解决
- Android JNI开发(7)--mk文件编写
- 批次查找策略select * from 存取顺序找到的批次表table where 选择条件B sort by 排序C