Vue3基础之v-if条件与 v-for循环

条件渲染

v-if、v-else-if、v-else

基本使用

v-if 指令用于根据表达式的真假来条件性地渲染元素，而 v-else-if 和 v-else 则用于添加额外的条件分支。

<template>
  <div>
    <p v-if="type === 'A'">Type Ap>
    <p v-else-if="type === 'B'">Type Bp>
    <p v-else>Type Cp>
  div>
template>

<script setup>
import { ref } from 'vue';
const type = ref('B');
script>

注意： v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面，v-else-if 的元素必须紧跟在一个 v-if 或一个 v-else-if 元素后面。

使用