Vue3条件渲染不生效问题：isVisible设为false后紫色Box容器仍显示的原因

阿华AIGC实验室

2026-4-28

解决Vue3条件渲染不生效的问题

嘿，我一眼就揪出问题啦！你的紫色Box容器没被Vue实例“接管”，所以v-if="isVisible"指令完全没起作用。

问题根源

Vue实例通过app.mount("#app")挂载到了id为app的div上，这意味着只有这个div内部的元素才会被Vue处理。而你的.box元素是放在#app外面的（在两个<hr>之间），Vue根本“看不到”它，自然不会执行条件渲染逻辑。

修复方案

把带有v-if指令的.box元素移动到#app容器内部就搞定啦！

修改后的完整代码

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
<title>Intro Into Vue3</title> 
<style> .box { background-color: purple; height: 200px; width: 200px; } </style> 
</head> 
<body> 
<div id="app"> 
  {{greeting}} 
  <input v-model="greeting" /> 
  <hr /> 
  <div class="box" v-if="isVisible"></div> 
  <hr> 
</div> 
<script src="https://unpkg.com/vue@next"></script> 
<script> 
let app = Vue.createApp({ 
  data: function () { 
    return { 
      greeting: "Hello Vue3", // 顺手帮你修正了拼写错误~
      isVisible: false, 
    }; 
  }, 
}); 
app.mount("#app"); 
</script> 
</body> 
</html>

另外提个小细节：我把你greeting值里的“Vude3”改成了“Vue3”，别让拼写错误干扰后续学习哦~

内容的提问来源于stack exchange，提问作者Nenad Kalicanin