问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue.js过滤器过滤后没有显示时间

头像
天际无痕
    334
    新手上路，请多包涵
    <!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style type="text/css">
        .grid{
            margin: auto;
            width: 530px;
            text-align: center;
        }
        .grid table {
            border-top: 1px solid #C2D89A;
            width: 100%;
            border-collapse: collapse;

        }
        .grid th,td{
            padding: 10;
            border: 1px dashed orange;
            height: 35px;
            line-height: 35px;
        }
        .grid th {
            background-color: orange;
        }
        .grid .book{
            padding-bottom: 10px;
            padding-top: 5px;
            background-color: orange;
        }
        .grid .total {
            height: 30px;
            line-height: 30px;
            background-color: orange;
            border-top: 1px solid orange;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="grid">
            <div>
                <hl>管理</hl>
                <div class="book">
                    <div>
                        <label for="id">
                            编号：
                        </label>
                        <input type="text" id="id" v-model='id' :disabled="flag" v-focus>
                        <label for="name">
                            名称：
                        </label>
                        <input type="text" id="name" v-model='name'>
                        <button @click='handle' :disabled='submitFlag'>提交</button>
                    </div>
                </div>
            </div>
            <div class="total">
                <span>工程总数；</span>
                <span>{{total}}</span>
            </div>
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>名称</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr :key='item.id' v-for='item in books'>
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
                        <td>
                            <a href="" @click.prevent='toEdit(item.id)'>修改</a>
                            <span>|</span>
                            <a href="" @click.prevent='deleteBook(item.id)'>删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script src="./lib/vue.js"></script>
    <script type="text/javascript">
        Vue.filter('format', function(value, arg) {
            function dateFormat(date, format) {
                if (typeof date === "string") {
                    var mts = date.match(/(\/Date\((\d+)\)\/)/);
                    if(mts && mts.length >= 3) {
                        date = parseInt(mts[2]);
                    }
                }
                date = new Date(date);
                if (!date || date.toUTCString() == "Invalid Date") {
                    return "";
                }
                var map = {
                    "M": date.getMonth() + 1, //月份
                    "d": date.getDate(), //日
                    "h": date.getHours(), //小时
                    "m": date.getMinutes(), //分
                    "s": date.geSeconds(), //秒
                    "q": Math.floor((date.getMonth() + 3) / 3),//季度
                    "S": date.getMilliseconds() //毫秒
                };
                format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
                    var v = map[t];
                    if (v !== undefined) {
                        if (all.length > 1) {
                            v = '0' + v;
                            v = v.substr(v.length - 2);
                        }
                        return v;
                    }else if (t === 'y') {
                        return (date.getFullYear() + '').substr(4 - all.length);
                    }
                    return all;
                });
                return format;
            }
            return dateFormat(value, arg);
        })
        var vm = new Vue({
            el:'#app',
            data: {
                flag: false,
                submitFlag: false,
                id: '',
                name: '',
                books:[{
                    id: 1,
                    name: '东',
                    date: '2525609975000'
                }]
            },
        });
    </script>
</body>
</html>
    vue.js
    阅读 1.7k
    1 个回答
    得票最新
    头像
    然后去远足
      42.9k103763

      过滤器里你写：

      date = new Date(date);
if (!date || date.toUTCString() == "Invalid Date") {
    return "";
}

      模型绑定的是：

      date: '2525609975000'

      压根都不是正常的 Date 字符串，传进去不就直接“return "";”了吗？

      用构造函数的话好歹也传个“2020-03-14” 之类的值啊；如果是时间戳，好歹也用 Date.prototype.setTime() 啊。

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题