13.v-show 与 v-if 的区别

最新推荐文章于 2022-06-09 10:34:11 发布

@司马懿

最新推荐文章于 2022-06-09 10:34:11 发布

阅读量107

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_40406929/article/details/118727811

版权

VUE 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id ="vue">
  <!--
  区别：
  v-if ：当条件为false,包含 v-if 指令的元素，根本就不会存在dom中
  v-show : 当条件为fasle时，v-show 只是给我们的元素添加一个行内样式：dispaly:none
  -->
 <h2 v-if="isShow">{{message}}</h2>
  <h2 v-show="isShow">{{message}}</h2>
  <!--
  开发中如何选择：
  根据：显示与隐藏之间频繁度
  -->
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#vue',
        data:{
            message:'你好！华为',
          isShow:true
        }
    });
</script>

</body>
</html>

@司马懿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
13.v-show 与 v-if 的区别

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id ="vue"> <!-- 区别： v-if ：当条件为false,包含 v-if 指令的元素，根本就不会存在dom中 v-show : 当条件为fasle时.
复制链接

扫一扫