vue3中引入class类的写法代码示例
作者：zzuli_huahua
最近一直在做vue项目,从网上搜索到的资料不太多,这篇文章主要给大家介绍了关于vue3中引入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>附：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类内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！