Vue条件渲染(v-if和v-show的区别)

在项目中我们总是用到根据某一值判断属性是否显示,或不同的值让其显示不同,顾名思义总是用v-if来实现,v-show也可用来判断是否显示,两者有什么区别呢?

相同点:两者都可用作为条件判断元素是否显示。

不同点:1). v-if后可跟v-else-ifv-else用来进行不同条件下的显示组件的不同可能性,v-show只能作为是否展示。 2). v-if在想切换多个元素时把一个 <template> 元素当做不可见的包裹元素上使用,v-show不能用<template> 元素

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

3).v-if 在条件切换过程中,事件监听器和子组件适当地被销毁和重建。

4). v-if条件为真才会渲染,条件为假则不渲染,v-show 无论条件真假总会渲染,只是简单地基于 CSS 进行切换。

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券