vue中v-if和v-show的区别

Posted 2023-04-13

参考技术A （菜鸟入门大神绕道）

共同点：v-if 和 v-show 都能实现元素的显示隐藏

区别：

    1. v-show 只是简单的控制元素的 display 属性，而 v-if 才是条件渲染（条件为真，元素将会被渲染，条件为假，元素会被销毁）；

    2.  v-show 有更高的首次渲染开销，而 v-if 的首次渲染开销要小的多；

    3. v-if 有更高的切换开销，v-show 切换开销小；

    4. v-if 有配套的 v-else-if 和 v-else，而 v-show 没有

    5. v-if 可以搭配 template 使用，而 v-show 不行

有什么不对的地方请大神们留言

vue中v-show与v-if的区别

 

v-show

在v-show中，元素是一直存在的，当v-show为false时，元素display:none只是隐藏了而已。 

 

v-if

作用：判断是否加载固定的内容，如果为真，则加载；为假时，则不加载。

用处：用在权限管理，页面条件加载。

语法：v-if=“判断表达式”

特点：控制元素插进来或者删除，而不是隐藏。

 

一般的，v-if有更高的切换消耗，而v-show有更多的初始化渲染消耗。

如果需要频繁的切换而对安全性无要求，使用v-show。如果在运行时，条件不可能改变，则使用v-if较好。