Vue之条件渲染

在Vue中，条件渲染可以通过v-if、v-else-if、v-else和v-show指令来实现。

1. v-if：条件性地渲染元素，如果条件为假，元素甚至不会被渲染到DOM中。

<div v-if="condition">
  <!-- 当 condition 为 true 时显示 -->
</div>

2. v-else-if：需要跟在v-if或v-else-if之后，表示else if块。

<div v-if="type === 'A'">
  <!-- 当 type 等于 'A' 时显示 -->
</div>
<div v-else-if="type === 'B'">
  <!-- 当 type 等于 'B' 时显示 -->
</div>

3. v-else：条件渲染的“else块”，与v-if或v-else-if配合使用。

<div v-if="condition">
  <!-- 当 condition 为 true 时显示 -->
</div>
<div v-else>
  <!-- 当 condition 为 false 时显示 -->
</div>

4. v-show：根据表达式之真假，切换元素的display CSS属性。元素始终会被渲染到DOM中，只是简单地进行显示或隐藏。

<div v-show="condition">
  <!-- 始终渲染，但基于 condition 的真假切换显示 -->
</div>

注意：v-if有更高的切换消耗，而v-show有更高的初始渲染消耗。选择哪个取决于条件渲染是否频繁改变。