v-if和v-show的区别

最新推荐文章于 2025-05-27 10:55:28 发布

汤立

最新推荐文章于 2025-05-27 10:55:28 发布

阅读量148

点赞数

分类专栏： Vue杂项文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_42867002/article/details/108165354

版权

Vue杂项专栏收录该内容

6 篇文章

订阅专栏

本文探讨了Vue.js中v-if与v-show指令的区别。v-if实现条件渲染，当表达式为假时，元素将从DOM中移除；而v-show则通过设置display属性为none来隐藏元素，元素始终保留在DOM中。对于频繁切换的情况，建议使用v-show；不频繁切换时，v-if更优。

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

v-if是真正的条件渲染，为false时就不会出现在dom中，不会渲染
v-show为fasle时它仍然在dom中，仍会渲染，只是display=none
所以，如果要频繁切换使用v-show好些，不频繁切换使用v-if好些

<div class="app">
        <span v-if="show">{{message}}</span><br>
        <span v-show="show">{{message}}</span>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm=new Vue({
            el:".app",
            data:{
                message:"HelloWorld",
                show:false
            }
        })
    </script>