条件渲染

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

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

<template> 上的 v-if

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-show

<h1 v-show="ok">Hello!</h1>

注意

v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用。

常见问题

v-if 和 v-show 有什么区别？

• v-if 是"真正的"渲染。当 v-if 为 false 时，元素不会被创建。
• v-show 是通过 css 的 display 属性来控制显示与隐藏。当 v-show 为 false 时，元素仍然会被创建。

所以，当渲染条件经常改变时使用 v-show 更合适，反之使用 v-if。