v-if和v-show的区别

最新推荐文章于 2024-07-19 14:16:29 发布

谷歌玩家

最新推荐文章于 2024-07-19 14:16:29 发布

阅读量381

点赞数

分类专栏： vue/cli 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_43539854/article/details/121481743

版权

Vue.js v-if v-show DOM 条件渲染

关键词由CSDN通过智能技术生成

vue/cli 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

直接上代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="../../js/vue.js"></script>
  <title>v-show</title>
</head>

<body>
  <div id="app">
    <h2 v-if="flag">{{message}}</h2>
    <h2 v-show="flag">{{message}}</h2>
  </div>
  <script type="text/javascript">
    const app = new Vue({
      el: '#app',
      data() {
        return {
          message: "你好",
          flag: false,
        };
      },
      computed: {

      },
      methods: {

      },
    });
  </script>

  <style scoped>

  </style>

</body>

</html>

在这里插入图片描述
可以看到，当使用v-if的条件不满足时，包含v-if指令的元素不会存在于dom中，而使用v-show指令的元素的属性会多出一个行内样式：display:none。

当需要在现实与隐藏之间频繁切换时，使用v-show；当只有有限次数的切换时，使用v-if。（其实还是根据实际情况来-.-）。

谷歌玩家

关注

0
点赞
踩
0

收藏

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

直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src=".
复制链接

扫一扫