v-if v-show

答案一:

使用了v-if的时候,如果值为false,那么页面将不会有这个html标签生成。

v-show则是不管值为true还是false,html元素都会存在,只是CSS中的display显示或隐藏

答案二:

v-if:

由于 v-if 是一个指令,因此必须将其附加到一个单独的元素上。但是如果我们想要切换多个元素呢?在这种场景中,我们可以将  元素,作为多个元素的无形容器(invisible wrapper),然后在这个容器上使用 v-if。最终渲染结果将不会包含  元素。

 

标题

 

段落 1

 

段落 2

v-else

可以使用 v-else 指令来表示和 v-if 对应的“else 块”:

  现在你可以看到我

  现在你看不到我

v-else 元素必须紧跟在 v-if 或 v-else-if 元素之后 - 否则无法识别它。

v-show

另一个根据条件展示元素的选项是 v-show 指令。用法大致相同:

Hello!

不同之处在于,具有 v-show 的元素会始终渲染并保留在 DOM 中。v-show 只会切换元素的 display 这个 CSS 属性。

注意,v-show 无法用于  元素,也不能和 v-else 配合使用。

v-if 和 v-show

v-if 是“真实”的条件渲染,因为它会确保条件块(conditional block)在切换的过程中,完整地销毁(destroy)和重新创建(re-create)条件块内的事件监听器和子组件。

v-if 是惰性的(lazy):如果在初始渲染时条件为 false,它不会执行任何操作 - 在条件第一次变为 true 时,才开始渲染条件块。

相比之下,v-show 要简单得多 - 不管初始条件如何,元素始终渲染,并且只是基于 CSS 的切换。

通常来说,v-if 在切换时有更高的性能开销,而 v-show 在初始渲染时有更高的性能开销。因此,如果需要频繁切换,推荐使用 v-show,如果条件在运行时改变的可能性较少,推荐使用 v-if。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 写这篇文章主要是记录我自己填的一个坑,掉进这个坑里,主要原因还是因为自己在阅读Vue官方文档的时候不够仔细。教训灰...
    Cuckoos定投笔记阅读 18,713评论 3 8
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,455评论 0 29
  • 1 要出门了,去换衣服,走到柜子前,我抽出压在最低下许久不曾穿却一直珍藏...
    旖旎一生阅读 1,462评论 0 0
  • 文|苏瑾七 之前有写过一篇文章,关于压力管理。其中提到一点是如果你在压力很大无法释放的时候,可以看一些让人声泪俱下...
    苏瑾七阅读 3,477评论 1 1
  • 忽晴忽雨 大自然也无法改变 忽喜忽愁 情绪左右不了 惟愿你 所得皆所期 所失亦无碍 ~~~~~~ Everybod...
    我在007阅读 1,462评论 0 0