vue项目中，数据还没获取到，页面已经渲染，导致页面没有数据

项目背景

在做vue3项目的时候，遇到了控制台打印出来了数据，而页面上数据却是undefined或NaN的情况。这是因为这部分页面在数据获取之前就渲染导致的。

解决办法

使用v-if。

先定义一个标志值取false

const isShow = ref(false)

当成功获取到数据的时候，标志值取true

host = val;
console.log('host',host);

isShow.value = true;

当标志值为true时，这部分页面才会渲染，而此时已经有数据了，就不会出现undefined或NaN的情况了。

<div class="example" v-if="isShow">
    {{ host.cpu_model }}
</div>