本文分析Vue.js中v-if和v-else指令同时显示内容的常见错误。通过对比初始代码与修复后的代码，指出问题根源在于未正确创建Vue实例。文章提供了具体的代码示例，展示了如何通过new Vue()绑定元素来确保条件渲染正常工作，帮助开发者快速排查此类基础配置错误。
v-if与v-else同时显示的问题现象
在使用Vue.js进行开发时，有时会遇到v-if和v-else指令未能按预期执行的情况。
对于初学者而言，在参考官方文档学习条件渲染指令时，可能会发现一个令人困惑的现象：无论条件如何判断，v-if和v-else对应的内容块竟然同时被渲染到了页面上。
以下是导致该问题的初始代码示例：
初始代码与错误结果
<div v-if="Math.random > 0.5">
" Math.random > 0.5 "
</div>
<div v-else>
" Math.random <= 0.5 "
</div>
运行上述代码后，页面显示的结果如截图所示，两个div内容均被展示。
" Math.random > 0.5 "
" Math.random <= 0.5 "
修复方案：创建Vue实例
经过排查，发现问题的核心原因在于忘记创建Vue应用实例。在Vue中，必须通过new Vue()显式创建实例并挂载到DOM元素，指令才能生效。修改后的正确代码如下：
<div id="test">
<div v-if="Math.random > 0.5">
" Math.random > 0.5 "
</div>
<div v-else>
" Math.random <= 0.5 "
</div>
</div>
<script type="text/javascript">
new Vue({
el : "#test"
})
</script>希望以上分析能帮助大家解决Vue条件渲染中的基础配置问题，感谢阅读与支持。