vue条件渲染复习

usrname为username

已于 2023-07-18 09:13:18 修改

阅读量212

点赞数

文章标签： vue.js 前端 javascript

于 2023-07-18 08:35:35 首次发布

本文链接：https://blog.csdn.net/weixin_54327001/article/details/131770773

版权

 在某些情况下，我们需要根据当前的条件决定某些元素或组件是否渲染，这个时候我们就需要进行条件判断了。
 Vue 提供了下面的指令来进行条件判断：
 v-if
 v-else
 v-else-if
 v-show

1.示例

<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>
</head>
<body>
 
  <!-- 模板语法 -->
  <div id="app">
    <ul v-if="names.length > 0">
      <li v-for="item in names">{{item}}</li>
    </ul>
 
    <h2 v-else>当前names没有数据, 请求获取数据后展示</h2>
  </div>
   
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data: function() {
        return {
          names: []
        }
      },
    })
 
    // 2.挂载app
    app.mount("#app")
  </script>
</body>
</html>

2.v-if与v-else结合使用

也可以单独使用v-if

 v-if 的渲染原理：
 v-if 是惰性的；
 当条件为 false 时，其判断的内容完全不会被渲染或者会被销毁掉；
 当条件为 true 时，才会真正渲染条件块中的内容；

v-if的返回值从false到true会再次出现v-if的元素,销毁不是不可恢复的

<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>
</head>
<body>
 
  <div id="app">
    <!-- v-if="条件" -->
    <div class="info" v-if="Object.keys(info).length">
      <h2>个人信息</h2>
      <ul>
        <li>姓名: {{info.name}}</li>
        <li>年龄: {{info.age}}</li>
      </ul>
    </div>
 
    <!-- v-else -->
    <div v-else>
      <h2>没有输入个人信息</h2>
      <p>请输入个人信息后, 再进行展示~</p>
    </div>
  </div>
   
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data() {
        return {
          info: {}
        }
      }
    })
 
    // 2.挂载app
    app.mount("#app")
  </script>
</body>
</html>

3.v-else-if

<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>
</head>
<body>
 
  <div id="app">
    <h1 v-if="score > 90">优秀</h1>
    <h2 v-else-if="score > 80">良好</h2>
    <h3 v-else-if="score >= 60">及格</h3>
    <h4 v-else>不及格</h4>
  </div>
   
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data() {
        return {
          score: 40
        }
      },
    })
 
    // 2.挂载app
    app.mount("#app")
  </script>
</body>
</html>

4.template 元素:代替包裹多个元素的div

 因为 v-if 是一个指令，所以必须将其添加到一个元素上：
 但是如果我们希望切换的是多个元素呢？
 此时我们渲染 div ，但是我们并不希望 div 这种元素被渲染；
 这个时候，我们可以选择使用 template ；
 template 元素可以当做不可见的包裹元素，并且在 v-if 上使用，但是最终 template 不会被渲染出来：
 有点类似于小程序中的 block

<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>
</head>
<body>
 
  <div id="app">
    <!-- v-if="条件" -->
    <template v-if="Object.keys(info).length">
      <h2>个人信息</h2>
      <ul>
        <li>姓名: {{info.name}}</li>
        <li>年龄: {{info.age}}</li>
      </ul>
    </template>
 
    <!-- v-else -->
    <template v-else>
      <h2>没有输入个人信息</h2>
      <p>请输入个人信息后, 再进行展示~</p>
    </template>
  </div>
   
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data() {
        return {
          info: { name: "why", age: 18 }
        }
      }
    })
 
    // 2.挂载app
    app.mount("#app")
  </script>
</body>
</html>

5.条件渲染-阶段案例

<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>
  <style>
    img {
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
 
  <div id="app">
    <div>
      <button @click="toggle">切换</button>
    </div>
     
    <template v-if="isShowCode">
      <img src="https://game.gtimg.cn/images/yxzj/web201706/images/comm/floatwindow/wzry_qrcode.jpg" alt="">
    </template>
  </div>
   
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data() {
        return {
          isShowCode: true
        }
      },
 
      methods: {
        toggle() {
          this.isShowCode = !this.isShowCode
        }
      }
    })
 
    // 2.挂载app
    app.mount("#app")
  </script>
</body>
</html>

6.v-show

 v-show 和 v-if 的用法看起来是一致的，也是根据一个条件决定是否显示元素或者组件：
v-show

7.v-show 和 v-if 的区别

 首先，在用法上的区别：
 v-show 是不支持 template ；
 v-show 不可以和 v-else 一起使用；
 其次，本质的区别：
 v-show 元素无论是否需要显示到浏览器上，它的 DOM 实际都是有存在的，只是通过 CSS 的 display 属性来进行切换；隐藏时:display:none
 v-if 当条件为 false 时，其对应的原生压根不会被渲染到 DOM 中；
 开发中如何进行选择呢？
 如果我们的原生需要在显示和隐藏之间频繁的切换，那么使用 v-show ；因为操作dom会引起回流与重绘
 如果不会频繁的发生切换，那么使用 v-if ；

<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>
  <style>
    img {
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
 
  <div id="app">
    <div>
      <button @click="toggle">切换</button>
    </div>
     
    <div v-show="isShowCode">
      <img src="https://game.gtimg.cn/images/yxzj/web201706/images/comm/floatwindow/wzry_qrcode.jpg" alt="">
    </div>
 
    <div v-if="isShowCode">
      <img src="https://game.gtimg.cn/images/yxzj/web201706/images/comm/floatwindow/wzry_qrcode.jpg" alt="">
    </div>
  </div>
   
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data() {
        return {
          isShowCode: true
        }
      },
 
      methods: {
        toggle() {
          this.isShowCode = !this.isShowCode
        }
      }
    })
 
    // 2.挂载app
    app.mount("#app")
  </script>
</body>
</html>