Vue CDN正常运行但v-if指令失效问题求助

你的v-if指令不生效的原因很明确：带有v-if="isVisible"的<div>不在Vue实例挂载的#app容器范围内。Vue只会对挂载目标（这里是#app）内部的DOM进行编译和响应式管理，容器外的元素不会被Vue处理，所以v-if自然无法生效。

修复方案 #

将需要Vue管理的元素全部放到#app容器内即可，修改后的index.html代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>THE TITLE</title>
</head>
<body>
  <div id="app">
    {{ greeting }}
    <input v-model="greeting"/> <hr />
    <!-- 将v-if元素移到#app内部 -->
    <div v-if="isVisible" class="box"></div>
  </div>

  <script src='https://unpkg.com/vue'></script>
  <script src="vue.js"></script>
</body>
</html>

你的vue.js代码无需修改，保持原样即可。修改后，当你改变isVisible的值时，对应的<div>就会根据条件显示/隐藏了。

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