Vue 条件语句

在 Vue.js 中，你可以使用 v-if 和 v-else 来实现条件性地渲染 HTML 元素。这些指令可以帮助你根据表达式的值动态地显示或隐藏元素。




v-if 和 v-else

• v-if 指令用于根据表达式的真假条件来渲染元素，如果表达式为真，则渲染该元素，如果为假，则不渲染。

<div v-if="condition">
  This will only show if 'condition' is true.
</div>

• v-else 指令与 v-if 配合使用，用于在 v-if 表达式为假时渲染一个备用的元素。

<div v-if="condition">
  This will show if 'condition' is true.
</div>
<div v-else>
  This will show if 'condition' is false.
</div>

• v-else-if

Vue 2.1.0+ 提供了 v-else-if 指令，允许你在 v-if 的备用元素之间添加额外的条件。

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

v-show

除了 v-if，还可以使用 v-show 指令来根据表达式的真假来切换元素的显示和隐藏。不同之处在于，使用 v-show 的元素始终会被渲染到 DOM 中，只是通过 CSS 的 display 属性控制显示和隐藏。

<div v-show="isVisible">
  This will be shown or hidden based on the 'isVisible' flag.
</div>

在列表中使用 v-if

在列表渲染中，你可以在 <template> 标签内使用 v-if 条件来动态渲染每个列表项。

<ul>
  <template v-if="items.length > 0">
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </template>
  <template v-else>
    <li>No items found.</li>
  </template>
</ul>

注意事项

• v-if 是惰性的：如果初始渲染时条件为假，元素将不会被渲染。只有当条件变为真时，元素才会被创建并插入 DOM。

• v-show 总是会被渲染到 DOM 中，通过 CSS 控制显示和隐藏，适合频繁切换显示状态的场景。

以上是使用 Vue.js 中条件语句的基本用法和注意事项。根据具体情况选择合适的指令来实现条件性的 UI 渲染。