Vue3--07Conditional Rendering 条件渲染

v-if
The directive v-ifis used to conditionally render a block. The block will only be rendered if the directive’s expression returns a truthy value.

v-if指令用来条件渲染一个块(block)元素.这个块元素只在指令表达式的结果为真值时候渲染.+

<h1 v-if="awesome">Vue is awesome!</h1>
复制代码

It is also possible to add an “else block” with v-else:

在 v-if后面加一个 v-else来渲染一个"else块元素"也是可行的:

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no :cry:</h1>
复制代码

Conditional Groups withv-ifon <template>在<template>上使用v-if来条件显示一组元素

Because v-ifis a directive, it has to be attached to a single element. But what if we want to toggle more than one element? In this case we can use v-ifon a <template>