v-show的用法以及和v-if的区别

小码哥呀

已于 2022-02-08 14:47:55 修改

阅读量270

点赞数

分类专栏： VUE 文章标签： vue.js 前端

于 2021-11-09 10:25:23 首次发布

本文链接：https://blog.csdn.net/qq_46112274/article/details/121222242

版权

VUE 专栏收录该内容

62 篇文章 9 订阅

订阅专栏

本文探讨了Vue.js中v-if和v-show指令的区别。当条件为false时，v-if会完全从DOM中移除元素，而v-show则仅通过设置display样式为none隐藏元素。在开发时，选择v-if或v-show应考虑性能和DOM操作的需求。v-if适合于条件不频繁切换且需要节省资源的情况，而v-show则适合于频繁切换显示状态的场景。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<body>
<div id="app">
  <!--v-if：当条件为false时，包含v-if指令的元素，根本就不会存在dom中-->
  <h2 v-if="isShow" id="aaa">{{message}}</h2>
  <!--v-show：当条件为false时，v-show只是给我们的元素添加一个行内样式：display：none-->
  <h2 v-show="isShow" id="bbb">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message:'你好呀',
            isShow:true
        }
    })
</script>
</body>

当app.isShow为false时

在这里插入图片描述

如下图所示

v-if：当条件为false时，包含v-if指令的元素，根本就不会存在dom中
v-show：当条件为false时，v-show只是给我们的元素添加一个行内样式：display：none

在这里插入图片描述

开发时如何选择二者

在这里插入图片描述

小码哥呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-show的用法以及和v-if的区别

<body><div id="app">  <h2 v-if="isShow" id="aaa">{{message}}</h2>  <h2 v-show="isShow" id="bbb">{{.
复制链接

扫一扫

专栏目录