10.Vue2.x条件渲染—v-if、v-show

最新推荐文章于 2024-05-01 00:02:34 发布

一个不专业的码农

最新推荐文章于 2024-05-01 00:02:34 发布

阅读量316

点赞数 9

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

本文链接：https://blog.csdn.net/weixin_45858439/article/details/137843574

版权

Vue2.X 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

文章目录

- 条件渲染—v-if、v-show

条件渲染—v-if、v-show

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>条件渲染</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
      img {
        width: 100px;
      }
    </style>
  </head>
  <body>
    <!-- 
      条件渲染：
        v-if:
            适用于：切换频率很低的场景
            特点：不展示的DOM节点直接被删除
        v-show:
            适用于：切换频率很高的场景
            特点：不展示的DOM节点没有被删除，仅仅是使用样式隐藏掉
        严重注意：使用v-if时，DOM节点可能无法获取到，而使用v-show一定可以获取到DOM节点
     -->
    <!-- 准备好一个容器 -->
    <div id="root">
      <h2>今天天气很{{isHot ? '炎热' : '凉爽'}}</h2>
      <!-- <button @click="changeWeather">切换天气</button> -->
      <button @click="isHot=!isHot">切换天气</button>
      <!-- 只要天气炎热，才会展示下面的div -->
      <div v-show="isHot">
        <img src="https://s3.ax1x.com/2020/12/13/reC1IA.jpg" /><br /><br />
        <span>建议：心静自然就会凉</span>
      </div>

      <!-- 只要天气凉爽，才会展示下面的div -->
      <div v-show="!isHot">
        <img src="https://s3.ax1x.com/2020/12/13/reCaqg.jpg" /><br /><br />
        <span>建议：建议穿秋裤</span>
      </div>

      <!-- ================================================================ -->
      <!-- 使用v-if、 v-else、 v-else-if做条件渲染 -->
      <div v-if="isHot">
        <img src="https://s3.ax1x.com/2020/12/13/reC1IA.jpg" /><br /><br />
        <span>建议：心静自然就会凉</span>
      </div>
      <!-- 只要天气凉爽，才会展示下面的div -->
      <div v-else>
        <img src="https://s3.ax1x.com/2020/12/13/reCaqg.jpg" /><br /><br />
        <span>建议：建议穿秋裤</span>
      </div>
    </div>
    <script>
      new Vue({
        el: "#root",
        data: {
          isHot: true,
        },
        methods: {
          changeWeather() {
            this.isHot = !this.isHot;
          },
        },
      });
    </script>
  </body>
</html>