v-if和v-show的异同

最新推荐文章于 2025-02-10 10:18:12 发布

原创最新推荐文章于 2025-02-10 10:18:12 发布 · 195 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #属性

vue属性专栏收录该内容

6 篇文章

订阅专栏

本文通过实例对比了Vue中v-if与v-show指令的区别。v-if能够直接销毁和重建DOM，适合条件频繁改变的场景；而v-show则通过修改CSS的display属性实现元素的显示与隐藏，适用于条件较少改变的情况。

v-if：能够直接销毁和重建dom达到元素显示和隐藏的效果

v-show：修改元素的displaycss数据让其显示或隐藏

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>v-show指令</title>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h1 v-show="yes">Yes</h1>
      <h1 v-show="no">No</h1>
      <h1 v-show="age > 25">Age: {{ age }}</h1>
    </div>
    <div id="a">
      <h1 v-if="yes">Yes</h1>
      <h1 v-if="no">No</h1>
      <h1 v-if="age > 25">Age: {{ age }}</h1>
    </div>

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          yes: true, //值为真
          no: false, //值为假
          age: 28
        }
      });
      var a = new Vue({
        el: "#a",
        data: {
          yes: true, //值为真，插入元素
          no: false, //值为假，不插入元素
          age: 28
        }
      });
    </script>
  </body>
</html>