条件与列表

条件和列表属于控制流，使用指令更清晰。

条件渲染

<p v-if="loading">加载中</p>
<p v-else-if="error">加载失败</p>
<p v-else>完成</p>

v-if 会创建和销毁节点。只是切换可见性时用 v-show。

<section v-show="open">内容</section>

列表渲染

<li v-for="item in items" :key="item.id">{{ item.name }}</li>

TIP

列表建议始终提供稳定 key。ElfUI 会使用 keyed 列表更新，插入、删除、重排都只移动必要节点。

template 分组

<template v-if="ready">
  <h2>标题</h2>
  <p>正文</p>
</template>

<template> 只作为透明分组，不会渲染成真实元素。