请选择 进入手机版 | 继续访问电脑版
查看: 140|回复: 0

【Vue笔记】使用Vue实现的简单的时间日期格式过滤器

[复制链接]

699

主题

740

帖子

6202

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6202
发表于 2018-10-3 13:38:35 | 显示全部楼层 |阅读模式
HTML部分:
[JavaScript] 纯文本查看 复制代码
<table class="table table-bordered table-hover table-striped">
        <thead>
        <tr>
            <td>ID</td>
            <td>NAME</td>
            <td>CTIME</td>
            <td>OPERATION</td>
        </tr>
        </thead>
        <tbody>
        <!--加上冒号表示实际上是一个值
        这里自定义了一个search方法,把所有的关键字,通过传参的方式,传递给了search方法
        -->
        <tr v-for="item in search(keyword)" :key="item.id">
            <td>{{item.id}}</td>
            <td v-text="item.name"></td>
            <td>{{item.ctime | dateFormat('yyyy-mm-dd')}}</td>
            <td><a href="#">删除</a></td>
        </tr>
        </tbody>
    </table>


JavaScript部分:
[JavaScript] 纯文本查看 复制代码
 // 定义一个全局过滤器
    Vue.filter('dateFormat', function (dataStr, patten) {
        // 根据给定的时间字符串,得到一个特定的时间
        var dt = new Date(dataStr);

        // yyyy-mm-dd
        var y = dt.getFullYear();
        // 由于month 是从0开始的,这里需要初始化
        var m = dt.getMonth() + 1;
        var d = dt.getDate();


        if (patten.toLowerCase() === 'yyyy-mm-dd') {
            // 这里也可以直接使用模板字符串
            return y + '-' + m + '-' + d;
        } else {
            var hh = dt.getHours();
            var mm = dt.getMinutes();
            var ss = dt.getSeconds();
            return y + '-' + m + '-' + d + hh + ':' + mm + ':' + ss;
        }
    });




上一篇:【考研资料】电子科技大学2019考研专业课资料大全(试题+答案)
下一篇:【java进阶】Java秒杀系统方案优化 高性能高并发实战视频教程
发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案; 如果你在论坛求助问题,并且已经从坛友或者管理的回复中解决了问题,请把帖子分类或者标题加上【已解决】。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

微信扫一扫

我爱科技论坛(www.52tech.tech)旨在打造全网最大的免费资源共享平台。目前论坛包括考研资料、编程学习、黑科技/科学上网、开源软件等资源模块,竭力服务于正在学习道路上的每一个人。我爱科技论坛,爱科技,更爱分享。致力于营造一个资源丰富、内容完善的大型网络学习交流资源共享平台!

QQ|Archiver|手机版|小黑屋|我爱科技论坛 快乐学习交流

(请勿发布违反中华人民共和国法律法规的言论,会员观点不代表我爱科技论坛的官方立场)

Powered by Discuz! X3.4© 2001-2013 Technology Inc.

返回顶部 返回列表