vue3中引入class类的写法代码示例

// @/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

<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>

<script setup lang="ts">
    import { onMounted, ref,computed } from 'vue'
    const addbg=ref<boolean>(false);
    const aEvent=()=>{
        addbg.value=!addbg.value
    }
    const txtDom=ref<HTMLButtonElement|null>(null);
    
    const btnEvent=(el:any)=>{
        el.target.dataset.id=1
        qHuan.value=true
    }
    const qHuan=ref(false)
    const btnDataId=computed(()=>{
        return qHuan.value?(txtDom.value as any).dataset.id:"无值"
    })
    onMounted(()=>{
        setTimeout(()=>{
            (txtDom.value as HTMLButtonElement).value="ref切换自身属性"
        },1000)
    })
</script>
<template>
    <div class="box">
        <h3></h3>
        <div>
            <input type="text" class="bor_red" :class="{'bor_bg':addbg}" />
            <br/>
            <a href="http://baidu.com" value="你好" @click.prevent="aEvent">A标签切换input背景</a>
            <br/>
            <input type="button" ref="txtDom" value="1秒变文字" @click="btnEvent"/>
            <br/>
            txtDom的data-id是:{{btnDataId}}
        </div>
    </div>
    
</template>
<style>
    .box{display: block;text-align:center;margin: 50px 0 0;}
    .ml_10{margin-left:10px}
    .bor_red{border:1px red solid;}
    .bor_bg{background: blue;}
</style>