条件渲染

元素显示指令（aip-show）

通过使用 aip-show 快速切换一个元素的 display 属性，当指令值为假时，元素会被赋予 display: none 的样式。

<div aip-state="{ open: false }">
    <div aip-show="open">展示的内容</div>
</div>

元素渲染指令（aip-if）

aip-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染，示例：

<div aip-if="open">
    <div>展示的内容</div>
</div>

你也可以添加 aip-else 指令：

<div aip-if="open">
    <div>展示的内容</div>
</div>
<div aip-else>
    <div>展示其他内容</div>
</div>

该指令可以用到普通的元素或者 template 元素上。

aip-else-if

aip-else-if 用于连续性的使用条件分支：

<div aip-if="color === 'gree'">绿色</div>
<div aip-else-if="color === 'red'">红色</div>
<div aip-else-if="color === 'pink'">粉色</div>
<div aip-else>默认色</div>

aip-if 与 aip-show

aip-if 在渲染时真正的移除或者增加元素，并且 aip-if 是惰性的，也就是第一次如果为假值时，什么都不会发生。

而 aip-show 仅仅是通过切换 CSS 的 display 属性，当你需要很频繁的切换元素时，考虑使用 aip-show 可以提高页面性能。