Vue v-if与v-show的区别

最新推荐文章于 2024-04-12 07:27:07 发布

原创最新推荐文章于 2024-04-12 07:27:07 发布 · 338 阅读

1 ·

CC 4.0 BY-SA版权

vue.js 专栏收录该内容

10 篇文章

订阅专栏

本文详细对比了Vue中v-if与v-show指令在元素显示与隐藏时的不同表现及性能影响。v-if在切换时会实际增删DOM，适合较少改变的状态；v-show则通过CSS控制显示，适用于频繁切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们使用v-if实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if，v-show，v-for 指令</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="root">
        <div v-if="show">hello world</div>
        <button @click="handleClick">toggle</button>
    </div>
    <script>
        new Vue({
                el:"#root",
                data:{
                    show: true
                },
            methods:{
                    handleClick: function(){
                        this.show = !this.show;
                    }
            }
        })
    </script>
</body>
</html>

显示效果：
在这里插入图片描述
点击按钮时隐藏：

再点击按钮时显示：

当使用v-if时，你点击按钮隐藏或者显示时，实际上就是把hello world这个标签直接从dom里面移除或增加，

我们把v-show替换v-if，实例如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if，v-show，v-for 指令</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="root">
        <div v-show="show">hello world</div>
        <button @click="handleClick">toggle</button>
    </div>
    <script>
        new Vue({
                el:"#root",
                data:{
                    show: true
                },
            methods:{
                    handleClick: function(){
                        this.show = !this.show;
                    }
            }
        })
    </script>
</body>
</html>

效果如下：
当点击按钮隐藏时：
在这里插入图片描述
当点击按钮显示时：

当使用v-show时，你点击按钮隐藏时，实际上div中的hello world这个元素不会从dom里删除掉，而是加了一个css的display：none的属性。

总结：
如果在目前这种使用的场景中我们要频繁的对div这个标签进行展示和隐藏。我们应该使用v-if还是v-show呢！事实上我们使用v-show会更好一点，因为它不会每次去增加dom或者删除dom，因此性能会相对更高一些！
如果div显示的频率不是这么大，你只需要做一次显示或者隐藏，你使用v-if会更好一些！

参考：参考DellLee老师的相关知识点！