Vue时间格式总结以及转换方法详解

在Vue项目中，经常需要对时间进行格式化以及转换，本篇文章将总结Vue中常用的时间格式化方式，并提供对应的代码示例。

1. 使用moment.js进行时间格式化

moment.js是一款非常好用的JavaScript时间处理库，可以轻松实现时间的格式化、计算、转换等功能。

安装moment.js

npm install moment --save

使用moment.js进行时间格式化

<template>
  <div>
    <p>当前时间：{{ date }}</p>
    <p>格式化后时间：{{ formatDate }}</p>
  </div>
</template>
<script>
// 引入moment.js
import moment from 'moment';

export default {
  data() {
    return {
      date: new Date()
    }
  },
  computed: {
    // 使用computed属性对时间进行格式化
    formatDate() {
      return moment(this.date).format('YYYY-MM-DD HH:mm:ss');
    }
  }
}
</script>

2. 使用Date.prototype.toLocaleString()方法进行时间格式化

Date.prototype.toLocaleString()方法是JavaScript原生的时间格式化方法，可以实现对日期和时间的格式化。

使用Date.prototype.toLocaleString()方法进行时间格式化

<template>
  <div>
    <p>当前时间：{{ date }}</p>
    <p>格式化后时间：{{ formatDate }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      date: new Date()
    }
  },
  computed: {
    // 使用computed属性对时间进行格式化
    formatDate() {
      // 将日期和时间转换为本地字符串
      return this.date.toLocaleString();
    }
  }
}
</script>

示例

示例一：使用moment.js将时间格式化为指定格式

<template>
  <div>
    <p>当前时间：{{ date }}</p>
    <p>格式化后时间：{{ formatDate }}</p>
  </div>
</template>
<script>
// 引入moment.js
import moment from 'moment';

export default {
  data() {
    return {
      date: new Date()
    }
  },
  computed: {
    // 使用computed属性对时间进行格式化
    formatDate() {
      // 将时间格式化为'YYYY-MM-DD HH:mm:ss'的格式
      return moment(this.date).format('YYYY-MM-DD HH:mm:ss');
    }
  }
}
</script>

示例二：使用Date.prototype.toLocaleString()方法将时间格式化为本地字符串

<template>
  <div>
    <p>当前时间：{{ date }}</p>
    <p>格式化后时间：{{ formatDate }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      date: new Date()
    }
  },
  computed: {
    // 使用computed属性对时间进行格式化
    formatDate() {
      // 将时间转换为本地字符串
      return this.date.toLocaleString();
    }
  }
}
</script>

以上两种方法都可以实现对于时间的格式化，具体使用哪种方式，可以根据项目需求和个人习惯来选择。