最近在使用Vue，遇到一個問題：使用v-if控制一個div的顯示和隱藏時，該div被渲染了但是不顯示。

在頁面模板中這樣寫：

<template>
<div class="wrapper">
<div class="content" v-if="showContent">
<p>這是要顯示的內容</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
showContent: true
}
},
mounted() {
setTimeout(() =>{
this.showContent = false;
console.log('showContent:', this.showContent);
}, 3000);
}
}
</script>

期望效果是：頁面初次加載div顯示，3秒后隱藏。但是實際上頁面初次加載時div并沒有顯示。

解決方法是，在div的樣式中添加一個min-height屬性，如下：

.content {
min-height: 1px;
}

當然也可以通過v-show指令來解決這個問題，只需要將v-if改為v-show即可。