软件系统开发定制vue 时间格式总结及转换

        软件系统开发定制中我们常常用el-date-picker软件系统开发定制标签来显示和选择时间,那么,软件系统开发定制常见的时间的格式包含年-月-日(yyyy-MM-dd)、年-月-日 时-分-秒(yyyy-MM-dd HH-mm-ss)、标准时间格式以及时间戳。那么今天我们就来总结一下常用的获取方法和它们之间的转换方法。

        一、获取当前时间。

        先看效果:

        

 

          Ⅰ. 格式:年-月-日 时-分-秒(yyyy-MM-dd HH-mm-ss)

  1. <template>
  2. <div>
  3. <h1>vue 时间格式常见应用</h1>
  4. <h3>获取当前时间(格式:年月日时分秒):{{time}}</h3>
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. data() {
  10. return {
  11. time:''
  12. }
  13. },
  14. created() {
  15. this.getNowTime();
  16. },
  17. methods: {
  18. getNowTime(){
  19. const yy = new Date().getFullYear()
  20. const MM = (new Date().getMonth() + 1) < 10 ? '0' + (new
  21. Date().getMonth() + 1) : (new Date().getMonth() + 1)
  22. const dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new
  23. Date().getDate()
  24. const HH = new Date().getHours() < 10 ? '0' + new Date().getHours() : new
  25. Date().getHours()
  26. const mm = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() :
  27. new Date().getMinutes()
  28. const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() :
  29. new Date().getSeconds()
  30. this.time = yy + '-' + MM + '-' + dd + ' ' + HH + ':' + mm + ':' + ss;
  31. }
  32. }
  33. }
  34. </script>

        Ⅱ.格式:标准时间

  1. <template>
  2. <div>
  3. <h1>vue 时间格式常见应用</h1>
  4. <h3>获取当前标准时间(格式:年月日时分秒):{{standard_time}}</h3>
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. data() {
  10. return {
  11. standard_time:''
  12. }
  13. },
  14. created() {
  15. this.getGMTtime();
  16. },
  17. methods: {
  18. getGMTtime(){
  19. this.standard_time =new Date();
  20. }
  21. }
  22. }
  23. </script>

        Ⅲ.格式:时间戳

  1. <template>
  2. <div>
  3. <h1>vue 时间格式常见应用</h1>
  4. <h3>获取当前时间的时间戳:{{current_timestamp}}</h3>
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. data() {
  10. return {
  11. current_timestamp:''
  12. }
  13. },
  14. created() {
  15. this.getnowtimestamp();
  16. },
  17. methods: {
  18. getnowtimestamp(){
  19. var date = new Date();
  20. this.current_timestamp = Date.parse(date)
  21. }
  22. }
  23. }
  24. </script>

        二、时间格式之间的转换

        效果:

        

        Ⅰ.年-月-日 时-分-秒格式转换成标准时间

  1. <template>
  2. <h1>时间格式之间的转换</h1>
  3. <h3>1.年月日时分秒格式转换成标准时间</h3>
  4. <div style="display: flex;">
  5. <h5>假如将"2022-08-17 09:54:48"转换成标准时间格式,则标准格式为:</h5>
  6. <h4>{{conversion_time}}</h4>
  7. </div>
  8. </template>
  9. <script>
  10. export default {
  11. data() {
  12. return {
  13. conversion_time: new Date('2022-08-17 09:54:48')
  14. }
  15. }
  16. }
  17. </script>

         Ⅱ.标准时间转换成年-月-日 时-分-秒格式

  1. <template>
  2. <h1>时间格式之间的转换</h1>
  3. <h3>2.标准时间转换成年月日时分秒格式</h3>
  4. <div style="display: flex;">
  5. <h5>假如将"Wed Aug 17 2022 09:54:48 GMT+0800 (中国标准时间)"转换成年月日时分秒格式,则
  6. 写为:</h5>
  7. <h4>{{conversion_time1}}</h4>
  8. </div>
  9. </template>
  10. <script>
  11. export default {
  12. data() {
  13. return {
  14. conversion_time1:'',
  15. }
  16. },
  17. created() {
  18. this.gettime();
  19. },
  20. methods: {
  21. gettime(){
  22. var date = new Date('Wed Aug 17 2022 09:54:48 GMT+0800 (中国标准时间)');
  23. var y = date.getFullYear();
  24. var m = date.getMonth() + 1;
  25. m = m < 10 ? ('0' + m) : m;
  26. var d = date.getDate();
  27. d = d < 10 ? ('0' + d) : d;
  28. var h = date.getHours();
  29. h = h < 10 ? ('0' + h) : h;
  30. var min = date.getMinutes();
  31. min = min < 10 ? ('0' + min) : min;
  32. var s = date.getSeconds();
  33. s = s < 10 ? ('0' + s) : s;
  34. this.conversion_time1 = y + '-' + m + '-' + d + ' ' + h + ':' + min + ':'
  35. + s;
  36. }
  37. }
  38. }
  39. </script>

        Ⅲ.年-月-日 时-分-秒格式转换成时间戳

  1. <template>
  2. <h3>3.年月日时分秒格式转换成时间戳</h3>
  3. <div style="display: flex;">
  4. <h5>假如将"2022-08-17 09:54:48"转换成时间戳,则写为:</h5>
  5. <h4>{{conversion_time2}}</h4>
  6. </div>
  7. </template>
  8. <script>
  9. export default {
  10. data() {
  11. return {
  12. conversion_time2:Date.parse('2022-08-17 09:54:48')
  13. }
  14. }
  15. }
  16. </script>

这时你是不是有点困惑怎么来判断转换的时间戳是否正确呢,我们可以通过在线的转换工具来转换检测,转换工具网址:

 那下面我们来检测一下:

 所以转换的是没有问题的!

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发