我要评论单独将一个类作为一个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>附：vue3 ts 两class共存写法
<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>总结
到此这篇关于vue3中引入class类的写法的文章就介绍到这了,更多相关vue3引入class类内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论