Vue3 性能优化:代码示例与最佳实践
<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>
原文地址: https://www.cveoy.top/t/topic/lB9F 著作权归作者所有。请勿转载和采集!