<template>
  <div class='next-body'>
    <span>{{ resdata.miaoshu }}</span>
    <strong class='ff-ab'>
      <div v-show='isLoading' v-loading style='margin-top: -30px'></div>
      <div v-show='!isLoading'>{{ resdata.shijian }}</div>
    </strong>
    <small> 秒</small>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isLoading: true,
      resdata: {
        miaoshu: '',
        shijian: '',
        status: 1
      }
    }
  },
  mounted() {
    setTimeout(() => {
      this.isLoading = false
    }, 2000)
  }
}
</script>
<style scoped>
.next-body {
  font-size: 16px;
  color: #333;
  line-height: 1.5;
}
.ff-ab {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
Vue3 性能优化:代码示例与最佳实践

原文地址: https://www.cveoy.top/t/topic/lB9F 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录