代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title/head body Div id=' app ' Div v-if=' ISif ' v-if/Div v-show=' ifShow ' v-show/Div按钮@click='toggleShow()'点击按钮/按钮/div/body脚本src=' http : vuedist/vue . min . js '/script script new vue({ El : ' # app '，data:)假：真；this.isIf=this.isIf？假：真；}} })/script/html在单击之前先编辑图片

点击后的图

可以看出，v-if是“真实”的条件渲染，因为它将确保条件块中的事件侦听器和子组件在切换过程中被正确销毁和重建；但是，v-show总是呈现元素，而不管初始条件如何，只是基于CSS进行切换。

一般来说，v-if的切换开销较高，而v-show的初始渲染开销较高。因此，如果需要频繁切换，最好使用v-show；如果运行时条件不太可能改变，最好使用v-if。

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。如果你想了解更多，请查看下面的相关链接