003 v-if 和v-show 之间的区别？

最新推荐文章于 2023-06-18 15:50:56 发布

一染星辰

最新推荐文章于 2023-06-18 15:50:56 发布

阅读量199

点赞数 1

分类专栏： vue 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_59519449/article/details/122417689

版权

vue 专栏收录该内容

53 篇文章 12 订阅

订阅专栏

重点知识掌握：****

v-if 是从DOM节点层面对节点进行添加或者移除，重绘与回流，消耗性能；

v-show 是从CSS样式层面去对节点进行隐藏，隐藏后，还占位置，性能消耗低；

使用场景的区别：如果要频繁切换显示或者隐藏，用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" />
    <title>Document</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 声明一个vue 即view -->
    <div id="app">
      <p v-if="isshow">你好哇撒</p>
    </div>

    <script>
      //创建一个 vue 的实例
      let app = new Vue({
        //控制所要渲染的UI层
        el: "#app",
        //model控制模型，将要渲染的数据放到 data 里边
        data: {
          isshow: false,
        },
      });
    </script>
  </body>
</html>