Vue v-if与v-show的区别

最新推荐文章于 2024-04-14 10:00:00 发布

webshitian

最新推荐文章于 2024-04-14 10:00:00 发布

阅读量261

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/qq_42943107/article/details/91465894

版权

vue.js 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

我们使用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老师的相关知识点！

webshitian

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue v-if与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&gt...
复制链接

扫一扫