当前位置：首页 > news >正文

Vue操作时间

news 2025/7/28 21:52:31

一、获取现在时间

const currentTime = () => {let date = new Date();let year = date.getFullYear(); //月份从0~11，所以加一let month = date.getMonth();let dateArr = [date.getMonth() + 1,date.getDate(),date.getHours(),date.getMinutes(),date.getSeconds(),];//如果格式是MM则需要此步骤，如果是M格式则此循环注释掉for (var i = 0; i < dateArr.length; i++) {if (dateArr[i] >= 1 && dateArr[i] <= 9) {dateArr[i] = "0" + dateArr[i];}}let strDate = year + "-" + dateArr[0] + "-" + dateArr[1]+" " +dateArr[2] +":" +dateArr[3] +":" +dateArr[4];//此处可以拿外部的变量接收  strDate:YYYY-MM-DD HH:mm:ssconsole.log("strDate", strDate);
};

二、提取日期部分

如果你想要从一个具有日期和时间的字符串中提取日期部分，只保留日期部分（年、月、日），你可以使用JavaScript中的Date对象来实现。以下是一个示例：

const dateTimeString = '2024-02-07 00:00:00';
const datePart = new Date(dateTimeString).toISOString().split('T')[0];console.log(datePart); // 输出: '2024-02-07'

在这个示例中，我们首先使用new Date(dateTimeString)将字符串转换为Date对象。然后，我们使用.toISOString()方法将Date对象转换为ISO格式的字符串（例如：'2024-02-07T00:00:00.000Z'）。最后，我们使用.split('T')[0]将ISO字符串按照 'T' 字符进行分割，只保留日期部分。

三、时间戳转换

组件中定义一个过滤器，以便在模板中使用它来将时间戳转换为特定的时间格式

<template><div><p>原始时间戳：{{ timestamp }}</p><p>转换后时间：{{ timestamp | formatDate }}</p></div>
</template><script>
export default {data() {return {timestamp: 1629792000000 // 这里是你的时间戳};},filters: {formatDate(timestamp) {const date = new Date(timestamp);return date.toLocaleString(); // 这里可以根据需要使用不同的日期格式化选项}}
};
</script>

完整日期：
```
new Date(timestamp).toLocaleString()
```

仅日期

new Date(timestamp).toLocaleDateString()

仅时间

new Date(timestamp).toLocaleTimeString()

自定义格式:
如果你需要更复杂的日期格式化，你可以考虑使用像 moment.js 或 date-fns 这样的第三方日期库。这些库提供了更多灵活的选项和格式化功能

以下是使用 moment.js 的示例：

首先，安装 moment.js 库：
```
cnpm install moment
```
然后在你的 Vue 组件中使用它：
```
<template><div><p>原始时间戳：{{ timestamp }}</p><p>转换后时间：{{ formattedDate }}</p></div>
</template><script>
import moment from 'moment';export default {data() {return {timestamp: 1629792000000 // 这里是你的时间戳};},computed: {formattedDate() {return moment(this.timestamp).format('YYYY-MM-DD HH:mm:ss'); // 自定义格式}}
};
</script>
```
使用的页面多可以选择封装参考：vue中 v-for如何将时间戳转换为时间_vue 字符串转时间戳_懒员员的博客-CSDN博客