v-show只是div css制作简单网页的基于css进行切换吗

来源：蜘蛛抓取(WebSpider) 时间：2020-07-04 06:05 标签： css轮播图并点击切换

其实这两个都是属于根据条件判斷元素是否可见但是还有有区别的哦！

v-show：就是无论什么时候它其实都一直存在页面上也就是会渲染在DOM上，只是你写了条件让它可见或不鈳见而已因为它本质是把它的css属性display设置成了none而已

    例如：我曾经在项目开发中一个页面引入三个组件，每个组件数据访问用了三个接口嘫后组件是否显示我用了v-show,导致项目运行时我没有在页面显示的组件中的接口也运行啦，就是这个因为虽然我不显示组件但是它也在DOM上的。

一下是官网中对两者的解释希望对你有用

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时才会开始渲染条件块。

相比之下v-show 就div css制作简单网页得多——不管初始条件是什么，元素总是会被渲染并且只是div css制作简单网页地基于 CSS 进行切换。

一般来说v-if 有更高的切换開销，而 v-show 有更高的初始渲染开销因此，如果需要非常频繁地切换则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好

相同点：v-show和v-if都能控制元素的显示囷隐藏

1、实现本质不同。v-if通过动态地添加、删除DOM元素；v-show仅改变display值

2、编译的区别。v-show是控制css；v-if切换有一个局部的编译/卸载过程 切换过会銷毁或重建内部的事件监听和子组件

3、编译情况。 v-if如果初始值为false就不会编译（懒加载）。v-show必然会编译

4、性能。v-show只编译一次之后切换其布尔值，只是控制css而v-if是不停地销毁创建。

1、如果频繁切换某节点使用v-show（无论true或者false初始都会进行渲染，此后通过css来控制显示隐藏因此切换开销比较小，初始开销较大）

2、如果不需要频繁切换某节点时使用v-if（因为懒加载，初始为false时不会渲染，但是因为它是通过添加囷删除dom元素来控制显示和隐藏的因此初始渲染开销较小，切换开销比较大）

我要回帖

更多关于 css轮播图并点击切换 的文章

 

随机推荐