vue指令 v-show和v-if

玉安_ZhangDe

已于 2022-07-10 18:53:18 修改

阅读量578

点赞数 1

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

于 2022-07-10 18:52:34 首次发布

本文链接：https://blog.csdn.net/qq_47373340/article/details/125709292

版权

Vue.JS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了 Vue.js 中用于条件渲染的 v-if 和 v-show 指令。v-if 根据表达式的真假决定是否在 DOM 树中创建或移除元素，适合不频繁切换；v-show 则通过改变 display 属性实现隐藏显示，适用于频繁切换场景。文中通过代码示例展示了它们的用法，并提供了一个折叠面板的案例来进一步说明其实际应用。

摘要由CSDN通过智能技术生成

目标: v-show和v-if 控制标签的隐藏或出现

语法
- v-show="vue变量"
- v-if="vue变量"
- v-else
原理
- v-show 用的display:none隐藏 (频繁切换使用)
- v-if 直接从DOM树上移除
代码：

<template>
  <div>
    <!-- v-show 或者 v-if
       v-show="vue变量"
       v-if="vue变量"
     -->
    <h1 v-show="isShow">我是h1</h1>
    <h2 v-if="isOk">我是h2</h2>
    <!-- 
      v-show隐藏: 采用display:none   // 频繁切换
      v-if隐藏:   采用从DOM树直接移除 // 移除
     -->

     <!-- v-if和v-else使用 -->
     <p v-if="age >= 18">成年了</p>
     <p v-else>未成年</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      isShow: false,
      isOk: false,
      age: 2
    }
  }
}
</script>

<style>

</style>

案例-折叠面板

此案例使用了less语法, 项目中下载模块

yarn add less@3.0.4 less-loader@5.0.0 -D

结构与样式代码：

<template>
  <div id="app">
    <h3>案例：折叠面板</h3>
    <div>
      <div class="title">
        <h4>芙蓉楼送辛渐</h4>
        <span class="btn" @click="isShow = !isShow">
          {{ isShow ? '收起' : '展开' }}
        </span>
      </div>
      <div class="container" v-show="isShow">
        <p>寒雨连江夜入吴, </p>
        <p>平明送客楚山孤。</p>
        <p>洛阳亲友如相问，</p>
        <p>一片冰心在玉壶。</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false
    }
  }
}
</script>

<style lang="less">
body {
  background-color: #ccc;
  #app {
    width: 400px;
    margin: 20px auto;
    background-color: #fff;
    border: 4px solid blueviolet;
    border-radius: 1em;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
    padding: 1em 2em 2em;
    h3 {
      text-align: center;
    }
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px solid #ccc;
      padding: 0 1em;
    }
    .title h4 {
      line-height: 2;
      margin: 0;
    }
    .container {
      border: 1px solid #ccc;
      padding: 0 1em;
    }
    .btn {
      /* 鼠标改成手的形状 */
      cursor: pointer;
    }
  }
}
</style>