【前端】vue3中引入class类的写法

最新推荐文章于 2025-03-06 18:43:00 发布

zzuli_huahua

最新推荐文章于 2025-03-06 18:43:00 发布

阅读量3.2k

点赞数 1

文章标签： 1024程序员节前端 vue.js javascript

本文链接：https://blog.youkuaiyun.com/qq_43813351/article/details/134007741

版权

本文介绍了如何在Vue3项目中，从一个名为RecordEntity.js的外部文件导入并使用自定义的Class类对象，展示了如何实例化和调用其方法，如获取时间戳的格式化功能。

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

在vue3+js中使用Class类对象

单独将一个类作为一个js文件，然后引入到vue3页面使用

// @/utils/RecordEntity.js
class RecordEntity {
  entity;

  constructor(entity) {
    this.entity = entity;
  }

  getTime() {
    return this.formatDate(this.entity.start_timestamp)
  }

  /**
   * 格式化时间戳
   * @param date
   * @returns {string}
   */
  formatDate(date) {
    let time = date;
    let dateTime = new Date(time).toJSON();
    return new Date(+new Date(dateTime) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
  }
}

export default RecordEntity

使用的vue页面

<template>
<div>Hello World</div>
</template>

<script setup>
import RecordEntity from "@/utils/RecordEntity.js";
// 使用类
const updateMap = (data) => {
  let recordEntity = {
  start_timestamp: 1696946167
  };
  let e = new RecordEntity(recordEntity)
  console.log("实体类结果time：",e.getTime())
}
</script>