Vue 条件渲染

Vue 条件渲染

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。

v-else

你也可以使用 v-else 为 v-if 添加一个“else 区块”。

<template>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no 😢</h1>
</template>

<style scoped></style>

<script setup>
import { ref } from 'vue'

const awesome = ref(true)
</script>

awesome 为 true 时：

为 false 时：

一个 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面，否则它将不会被识别。

v-else-if​

顾名思义，v-else-if 提供的是相应于 v-if 的“else if 区块”。它可以连续多次重复使用：

和 v-else 类似，一个使用 v-else-if 的元素必须紧跟在一个 v-if 或一个 v-else-if 元素后面。

<template>
  <div v-if="type === 'A'">
    A
  </div>
  <div v-else-if="type === 'B'">
    B
  </div>
  <div v-else-if="type === 'C'">
    C
  </div>
  <div v-else>
    Not A/B/C
  </div>
</template>

<style scoped></style>

<script setup>
import { ref } from 'vue'

const type = ref('A')
</script>

v-if 和 v-for​

当 v-if 和 v-for 同时存在于一个元素上的时候，v-if 会首先被执行。同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。