Vue 3 v-if 指令：条件渲染元素

在 Vue 3 中，v-if 指令用于根据条件在 DOM 中添加或移除元素。

使用 v-if 指令的基本语法如下：

<template>
  <div>
    <p v-if='condition'>条件为真时显示的内容</p>
    <p v-else>条件为假时显示的内容</p>
  </div>
</template>

在上面的例子中，v-if 指令根据 condition 的值来决定是否显示 <p> 元素。如果 condition 为真，则显示条件为真时的内容，否则显示条件为假时的内容。

在 Vue 3 中，v-if 指令还支持使用 <template> 标签作为容器元素，可以在 <template> 中包含多个元素，并根据条件来显示其中的部分元素。例如：

<template>
  <div>
    <template v-if='condition'>
      <p>条件为真时显示的内容</p>
      <p>条件为真时显示的内容</p>
    </template>
    <template v-else>
      <p>条件为假时显示的内容</p>
      <p>条件为假时显示的内容</p>
    </template>
  </div>
</template>

在上面的例子中，根据 condition 的值，v-if 指令会决定显示哪个 <template> 中的内容。

除了 v-if 指令，Vue 3 还引入了 v-show 指令用于根据条件切换元素的显示和隐藏。与 v-if 不同的是，使用 v-show 指令隐藏的元素仍然保留在 DOM 中，只是通过 CSS 的 display 属性来控制元素的可见性。使用 v-show 的语法与 v-if 类似：

<template>
  <div>
    <p v-show='condition'>条件为真时显示的内容</p>
    <p v-show='!condition'>条件为假时显示的内容</p>
  </div>
</template>

在上面的例子中，根据 condition 的值，v-show 指令会决定是否显示 <p> 元素，但是隐藏的元素仍然保留在 DOM 中。