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中。