Vue v-if与v-show的区别

本文详细对比了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老师的相关知识点!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值