v-if 和 v-show 的简介

117 阅读1分钟

①相同点:都是用于控制元素在页面上是否显示,用法相同,设置 true 或 false;
②区别:v-show 相当于给元素添加 css 样式 display:none,有更高的初始渲染消耗;v-if 是将整个 dom 添加或删除,有更高的切换消耗;
③使用场景:如果切换非常频繁,用 v-show 比较好,如果运行条件很少改变,用 v-if 比较好;
④原理:v-show 不管初始条件是什么,元素都会被渲染,设置 display 属性,v-if 根据表达式的值来决定是否生成 DOM;