Vue零碎知识点（3）——v-show和v-if的区别_v-show为false还能获取到元素吗-CSDN博客

本文链接：https://blog.csdn.net/cnds123321/article/details/109322317

v-if和v-show是区别

v-if控制元素是否渲染到页面
v-show控制元素是否显示（已经渲染到页面了）

v-show的示例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>学习Vue</title>
    <!-- 使用CDN引入Vue.js -->
    <script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <p v-show="flag">恭喜你，答对了！</p>
    </div>

    <script type="text/javascript">
      new Vue({
        el: "#app",
        data: {
          flag: false
        }
      })
    </script>
  </body>
</html>

浏览器显示

当v-show为true时

当v-show为false

已经注意到当v-show为false时，通过设置CSS样式display:none使p标签不显示出来，但实际上是渲染出来的，但并没有显示在页面上。

v-if示例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>学习Vue</title>
    <!-- 使用CDN引入Vue.js -->
    <script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <p v-if="flag">v-if显示</p>
    </div>

    <script type="text/javascript">
      new Vue({
        el: "#app",
        data: {
          flag: true
        }
      })
    </script>
  </body>
</html>

当v-if为true时