请选择 进入手机版 | 继续访问电脑版

我爱科技论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 220|回复: 0

[技术分享] 【Vue笔记】使用Vue实现的简单的时间日期格式过滤器

[复制链接]

696

主题

743

帖子

7593

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
7593

最佳新人活跃会员热心会员推广达人宣传达人灌水之王突出贡献优秀版主荣誉管理论坛元老

发表于 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秒杀系统方案优化 高性能高并发实战视频教程
发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案; 如果你在论坛求助问题,并且已经从坛友或者管理的回复中解决了问题,请把帖子分类或者标题加上【已解决】。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

微信扫一扫

快速回复 返回顶部 返回列表