v-if和v-show的异同

最新推荐文章于 2024-05-31 11:03:20 发布

H_c_l

最新推荐文章于 2024-05-31 11:03:20 发布

阅读量154

点赞数

分类专栏： vue属性文章标签： vue 属性

本文链接：https://blog.csdn.net/H_c_l/article/details/89599647

版权

vue属性专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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>