• 64160

    文章

  • 632

    评论

  • 59

    友链

  • 最近新加了换肤功能,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

vue 循环取值日期格式化,字符串截取处理

撸了今年阿里、腾讯和美团的面试,我有一个重要发现.......>>

用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}}

最终页面展示效果:


 转载至链接:https://my.oschina.net/u/2301293/blog/3105067。

695856371Web网页设计师②群 | 喜欢本站的朋友可以收藏本站,或者加入我们大家一起来交流技术!

欢迎来到梁钟霖个人博客网站。本个人博客网站提供最新的站长新闻,各种互联网资讯。 还提供个人博客模板,最新最全的java教程,java面试题。在此我将尽我最大所能将此个人博客网站做的最好! 谢谢大家,愿大家一起进步!

转载原创文章请注明出处,转载至: 梁钟霖个人博客www.liangzl.com

0条评论

Loading...


发表评论

电子邮件地址不会被公开。 必填项已用*标注

自定义皮肤
注册梁钟霖个人博客