vue快速入门（五）v-show与v-if

代码对我眨眼睛

已于 2024-04-05 13:36:56 修改

阅读量579

点赞数 5

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

于 2024-04-04 23:01:02 首次发布

本文链接：https://blog.csdn.net/m0_73756108/article/details/137027828

版权

vue 专栏收录该内容

59 篇文章 1 订阅

订阅专栏

注释很详细，直接上代码

新增内容

v-if与v-show底层的区别
v-if与v-show的效果

源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 挂载点 -->
  <div id="root">

    <!-- 
    v-show 是使用样式控制是否显示元素
    v-if 直接移除或者加上元素

    严格说的：频繁切换的元素建议使用v-show；
    不严格的说：随意；
    -->
    <div v-show="flag">v-show控制的文字</div>
    <div v-if="flag">v-if控制的文字</div>
  </div>

  <!-- 导入vue的js代码 -->
  <script src="./lib/vue2.js"></script>

  <script>
    const app = new Vue({// Vue实例
      el: '#root',// 挂载点
      data: {// 数据
        flag:true
      }
    })
  </script>
</body>
</html>