vue.js时间戳格式转换

本文介绍如何在Vue项目中利用Moment.js库来格式化日期,并展示了具体的代码实现方式。通过自定义过滤器,可以方便地将日期字符串转换为所需的格式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Vue.filter('moment', function (value, formatString) {
    formatString = formatString || 'YYYY-MM-DD';
    return moment(value).format(formatString);
});

var vm = new Vue({
    el: '#vue_wrapper',
    data: {
        navItemWidth: [],
        navWidth: 0,
        navItemNum: 0,
        active: 'tab1',
        list1: [],
        allLoaded1: false,
        list2: [],
        allLoaded2: false,
        list3: [],
        allLoaded3: false,
        str_currentPage1: 1,
        str_currentPage2: 1,
        str_currentPage3: 1,
        total_page1: 0,
        total_page2: 0,
        total_page3: 0,
        str_pageRow: 10
    },
    });
                            <div v-for="item in list1">
                                <div class="total_li">
                                    <div class="title_left">{{item.newsTitle}}</div>
                                    <div class="title_right">{{item.createDate|moment}}</div>
                                </div>
                            </div>

moment是一个处理时间的类库,下载地址http://momentjs.com/downloads/moment.js

### 如何使用 Moment.js 处理时间戳 在 JavaScript 开发中,`Moment.js` 提供了一种简便的方法来处理时间戳。通过该库可以轻松地将 Unix 时间戳转换为可读的日期字符串,并执行各种日期运算。 #### 安装 Moment.js 为了能够在项目中使用 `Moment.js`,首先需要将其安装到项目依赖中: ```bash npm install moment --save ``` #### 导入并初始化 完成安装之后,在代码文件顶部导入 `Moment.js` 库以便后续调用其函数: ```javascript import moment from 'moment'; ``` #### 将时间戳转换为指定格式的时间字符串 假设有一个十位数的时间戳(单位:秒),可以通过如下方式将其转换为特定格式的日期字符串: ```javascript function convertTimestamp(timestamp) { // 十位数时间戳乘以1000变为毫秒级时间戳 const formattedTime = moment.unix(timestamp).format('YYYY-MM-DD HH:mm:ss'); return formattedTime; } ``` 此段代码会返回形如 "2023-09-18 17:45:30" 的字符串表示形式[^4]。 #### 计算两个时间之间的差异 如果想要知道某个给定时间距离现在过去了多久,可以用下面的方式实现: ```javascript function timeDifferenceFromNow(unixTimestampInSeconds) { let duration = moment.duration(moment().diff(moment.unix(unixTimestampInSeconds))); let daysDiff = Math.floor(duration.asDays()); return `${daysDiff} day(s)`; } ``` 这段代码计算了传入的时间戳相对于当前时刻所经过的日差数量[^1]。 #### 自定义过滤器应用于 Vue 组件 对于基于 Vue 构建的应用程序来说,还可以创建全局过滤器来进行更灵活的数据展示控制: ```javascript Vue.filter('formatDate', function(value, formatString='YYYY-MM-DD HH:mm:ss') { if (value === null || value === undefined) return ''; return moment.unix(value).format(formatString); }); ``` 这样就可以直接在模板里像 {{ timestamp | formatDate }} 这样简单地应用自定义格式化规则[^5]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值