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

admin · 发表于 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;
        }
    });

		自动登录	找回密码
密码			立即注册

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

最佳新人

活跃会员

热心会员

推广达人

宣传达人

灌水之王

突出贡献

优秀版主

荣誉管理

论坛元老