vue各种时间类型转换

在Vue中，时间类型的转换通常涉及到两个方面：在模板中显示时间和在JavaScript代码中处理时间。以下是一些常见的时间转换方法：

1. 在模板中格式化时间戳：

<template>
  <div>{{ formatDateTime(timestamp) }}</div>
</template>
 
<script>
export default {
  data() {
    return {
      timestamp: 1631022742000
    };
  },
  methods: {
    formatDateTime(time) {
      const date = new Date(time);
      return date.toLocaleString();
    }
  }
};
</script>

2. 在JavaScript中转换时间格式：

// 假设你有一个ISO字符串
const isoString = '2021-09-07T15:09:02Z';
const date = new Date(isoString);
 
// 转换为只有年月日的字符串
const shortDate = date.toISOString().split('T')[0];
 
// 转换为自定义格式的字符串
const customFormat = date.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' });

3. 在模板中格式化日期对象：

<template>
  <div>{{ dateObject.toLocaleDateString() }}</div>
</template>
 
<script>
export default {
  data() {
    return {
      dateObject: new Date()
    };
  }
};
</script>

4. 在JavaScript中将字符串转换为日期对象：

const dateString = '2021-09-07';
const dateObject = new Date(dateString);

5. 在模板中使用moment.js库进行时间转换：

<template>
  <div>{{ moment(timestamp).format('YYYY-MM-DD HH:mm:ss') }}</div>
</template>
 
<script>
import moment from 'moment';
 
export default {
  data() {
    return {
      timestamp: 1631022742000
    };
  },
  methods: {
    moment
  }
};
</script>

确保在使用moment.js时，先通过npm或yarn安装这个库：

npm install moment
# 或者
yarn add moment

以上代码提供了几种时间转换的例子，包括在模板中格式化时间戳、在JavaScript中转换时间格式、在模板中使用moment.js库等。根据实际需求，你可以选择合适的方法进行时间转换。