【Vue】v-if / v-show条件渲染指令

最新推荐文章于 2024-07-04 00:59:27 发布

只会CV只会CV只会CV

最新推荐文章于 2024-07-04 00:59:27 发布

阅读量707

点赞数 10

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

本文链接：https://blog.csdn.net/qq_39921135/article/details/139294437

版权

Vue 专栏收录该内容

228 篇文章 0 订阅

订阅专栏

条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：

v-show
1. 作用：控制元素显示隐藏（简单的显示隐藏）
2. 语法： v-show = "表达式" 表达式值为 true 显示， false 隐藏
3. 原理：切换 display:none 控制显示隐藏
4. 场景：频繁切换显示隐藏的场景

v-if

作用：控制元素显示隐藏（条件渲染）
语法： v-if= “表达式” 表达式值 true显示， false 隐藏
原理：基于条件判断，是否创建或移除元素节点
场景：要么显示，要么隐藏，不频繁切换的场景

68189123775

示例代码：

<body>
  <!-- 
    v-show底层原理：切换 css 的 display: none 来控制显示隐藏
    v-if  底层原理：根据 判断条件 控制元素的 创建 和 移除（条件渲染）
  -->

  <div id="app">
    <!-- 这里可以直接使用底下的flag变量 -->
    <div v-show="flag" class="box">我是v-show控制的盒子</div>
    <div v-if="flag" class="box">我是v-if控制的盒子</div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        flag: false
      }
    })
  </script>
</body>

只会CV只会CV只会CV

关注

10
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Vue】v-if / v-show条件渲染指令

条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。表达式值为 true 显示， false 隐藏。作用：控制元素显示隐藏（简单的显示隐藏）场景：频繁切换显示隐藏的场景。
复制链接

扫一扫