当前位置：首页 > article >正文

《Vue零基础入门教程》第十三课：条件渲染

article 2024/12/4 1:59:33

往期内容

《Vue零基础入门教程》第六课：基本选项

《Vue零基础入门教程》第八课：模板语法

《Vue零基础入门教程》第九课：插值语法细节

《Vue零基础入门教程》第十课：属性绑定指令

《Vue零基础入门教程》第十一课：事件绑定指令

《Vue零基础入门教程》第十二课：双向绑定指令

1) 什么是条件渲染

当条件满足时, 渲染到页面

主要指令: v-if和v-show

2) 示例

<!DOCTYPE html>
<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>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 当一个内容有复杂逻辑时, 使用v-if -->
      <div v-if="flag">我是通过v-if控制的</div>
      <div v-else>我是通过v-else控制的</div>
      <!-- 当一个内容需要切换显示时, 使用v-show -->
      <div v-show="flag">我是通过v-show控制的</div>
      <div v-show="!flag">我是通过v-show控制的</div>
    </div>

    <script>
      const { createApp } = Vue

      const vm = createApp({
        data() {
          return {
            flag: true,
          }
        },
      }).mount('#app')
    </script>
  </body>
</html>

当flag为true时, 两个元素都可以显示
当flag为false时, 两个元素都不显示, 区别是

- v-if: 不会创建元素
- v-show: 创建元素, 但是display=none

3) 使用表达式

在指令表达式中, 除了使用变量外, 也可以使用表达式

<div v-if="flag == true">这是用v-if渲染的元素</div>

案例

💡 需求

通过按钮控制元素的显示/隐藏

示例

<!DOCTYPE html>
<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>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <button @click="flag = !flag">切换显示/隐藏</button>
      <div v-show="flag">div显示的内容</div>
    </div>

    <script>
      const { createApp } = Vue

      const vm = createApp({
        data() {
          return {
            flag: true,
          }
        },
        methods: {
          toggle() {
            // if (this.flag == true) {
            //   this.flag = false
            // } else {
            //   this.flag = true
            // }
            this.flag = !this.flag
          },
        },
      }).mount('#app')
    </script>
  </body>
</html>