用vue取值页面遍历时,每次都搜索js日期格式化和字符串长度截取,这次记录下来,以后从这里直接拿即可。html代码如下
<div id="cold_news">
<ul class="col-xs-12">
<li class="col-xs-3" v-for="(news, index) in hotNews" >
<a href="javascript:void(0)">
<img class="pull-left hot_img" :src="news.PicUrl" alt="">
<span class="pull-left hot_news">{{news.createdData|formatDate}}</span>
<span class="pull-left hot_news" style="width:100px">{{news.title|subString}}</span>
</a>
</li>
</ul>
</div>
js代码如下:
var app = new Vue({
el : '#cold_news',
data : {
hotNews: [],
},
created : function() {
var _this = this;
_this.getHotNews();
},
updated :function(){
},
methods : {
getHotNews : function() {
var _this = this;
$.ajax({
type : 'get',
url : basePath+ '/jf/bigData/getArticleList',
data : {},
success : function(res) {
if (res.code === 0) {
_this.hotNews = res.data;
}
}
})
},
},
filters: {
formatDate(time) {
var date = new Date(time);
return formatRiQi(date);
},
subString(value) {
if(value != "" && value.length > 24){
return value.substr(0,22) + "…";
} else {
return value;
}
}
}
});
// 日期格式化日
function formatRiQi(sj){
var now = new Date(sj);
var year=now.getFullYear();
var month=now.getMonth()+1;
var date=now.getDate();
var hour=now.getHours();
var minute=now.getMinutes();
var second=now.getSeconds();
// return year+"-"+month+"-"+date; //+" "+hour+":"+minute+":"+second;
return year+"年"+month+"月"+date+"日"; //+" "+hour+":"+minute+":"+second;
}
获取到的json数据格式如下,即hotNews对象:
{
"code": 0,
"data": [{
"createdData": "2019-04-10 11:34:05",
"description": "",
"url": "",
"title": "生鲜电商陷入生死劫冷链物流不是绊脚石",
"picUrl": "/images/201904/35d05df7-be79-40ce-bf0d-f1a4e0498f68.jpg"
}, {
"createdData": "2019-04-10 11:29:32",
"description": "",
"url": "",
"title": "重磅 | 新规:肉制品企业需对生猪原料自检非洲猪瘟病毒!5月1日起执行",
"picUrl": "/images/201904/171b7d8e-7e0b-42b9-bee1-fa0c6d797c11.jpg"
}, {
"createdData": "2019-04-10 10:47:34",
"description": "",
"url": "",
"title": "中共中央办公厅 国务院办公厅印发《关于促进中小企业健康发展的指导意见》",
"picUrl": "/images/201904/1b685abb-55f7-4024-9f2e-7a7b240cfa2b.jpg"
}, {
"createdData": "2019-04-10 10:45:45",
"description": "",
"url": "",
"title": "特朗普称将对欧盟商品加征关税 欧盟研究报复措施",
"picUrl": "/images/201904/7057bba9-59f7-41d0-b69b-eed7b4972a37.jpg"
}]
}
注意js中的处理日期处理调用外部的函数:
// 日期格式化日
function formatRiQi(sj){
var now = new Date(sj);
var year=now.getFullYear();
var month=now.getMonth()+1;
var date=now.getDate();
var hour=now.getHours();
var minute=now.getMinutes();
var second=now.getSeconds();
// return year+"-"+month+"-"+date; //+" "+hour+":"+minute+":"+second;
return year+"年"+month+"月"+date+"日"; //+" "+hour+":"+minute+":"+second;
}
在vue页面中使用filters方法:
{{news.title|subString}} 或 {{news.createdData|formatDate}}
在日期格式化时遇到的问题,日期格式化方法在最下面。如果在中国时区 formatDate(‘2019-07-09‘) 结果是 ‘2019-07-09’,如果 在夏威夷时区 utc-10:00 或者别的时区 formatDate(‘2019-07-09‘) 结果是 ‘2019-07-08’
为了更好的讲这节的内容,提示一个 JS 处理日期的小技巧,想获取上个月最后一天,只需要设置SetDate参数为0即可。使用 JS 获取当前月的最后一天,咱们通常的思路先获取下个月的第一天
我们这里来获取今天所在星期的始末日期,我们可以通过(new Date).getDay()来获取今天是星期几,然后再通过这个减去或者加上一定的天数,就是这个星期的开始日期和结束日期。
javascript中的内置对象是我们经常会用到的,那么今天我们就来说说Date的四种构造方法吧,new Date()这是我们最常使用也最熟悉不过的Date对象的构造方法了,通过无参数的构造函数我们可以默认获取到一个代表实例化时的Date对象
我们这里来获取今天所在星期的始末日期,我们可以通过(new Date).getDay()来获取今天是星期几,然后再通过这个减去或者加上一定的天数,就是这个星期的开始日期和结束日期。
ElementUI是饿了么推出的一套基于vue2.x的一个ui框架。官方文档也很详细,这里做一个element-ui日期插件的补充。官方文档中使用picker-options属性来限制可选择的日期,这里举例子稍做补充。
js获取指定时间范围内指定间隔天数的所有日期,前端js,已知开始时间a、结束时间b和间隔天数c,要求取在a-b这两个时间范围内、间隔c天的所有日期。
虽然现在处理日期方面已经有了很成熟的也很好用的库,例如(momentjs和date-fns),但是在实际开发中,我们有时候可能并不需要整个库。所以我就在下面整理了在前端开发时对日期时间的各种操作,也算是比较全的了
今天发现一个奇怪的问题,在iPhone使用 safari 选择定时发布文章到OSC,选择时间后提示不是合法的时间,判断时间的代码如下:在Chrome下会输出 pass,在Safari会输出 isNaN,根据 ECMAScript 5 ISO-8601 format support: 的说法
给定一串毫秒数,如何使用JavaScript将它们转换为日期格式?下面本篇文章就来给大家介绍一下使用JavaScript将毫秒转换为日期格式的方法,希望对大家有所帮助。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!