Vue 3教程03 - 条件式渲染

v-if / v-else / v-else-if

简单用法：

markup

<div v-if="score >= 60">
  Pass!
</div>
<div v-else>
  Oh no 😢
</div>

多重分支：

markup

<div v-if="score >= 70">A</div>
<div v-else-if="score >= 60">B</div>
<div v-else-if="score >= 50">C</div>
<div v-else>D</div>

如果在满足某个条件时需要显示多个标签的话，可以：

• 添加一个父级div元素，并在该div元素上应用v-if。但这种方式可能会影响布局。
• 使用tempalte，这样就不会增加额外的HTML元素。

markup

<template v-if="student.registered">
  <h2>{{ student.name }}</h2>
  <p>{{ student.summary }}</p>
</template>

v-show:

也可以使用v-show:

markup

<div v-show="score >= 60">
  Pass!
</div>

v:if和v:show的最大区别在于：v-if条件不满足的时候，会对应元素从DOM中删除，而v:show只会将对应元素隐藏。因此，为了提高性能，当用户需要频繁更改某个变量值时，通常使用v:show，否则使用v:if。