vue3中引入class類的寫法代碼示例

更新時間：2024年05月20日 11:50:13 作者：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  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類內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: