ArkUI 条件渲染

前言

在有些情况下，我们需要根据实际的业务来控制标签是否渲染到真实 DOM 中。因此，条件渲染就派上用场了，它分为if...elif/else和show两种。

1. show 允许标签渲染到真实 DOM 中，只是利用了 CSS 样式 display: none; 来控制是否显示；
2. 如果 if 的条件满足，就把标签渲染到真实 DOM 中。

if...elif/else

<div class="container">
    <text if="{{ flag == 'foo' }}">foo</text>
    <text elif="{{ flag == 'bar' }}">bar</text>
    <text else>foobar</text>
</div>

export default {
    data: {
        flag: 'bar'
    },
}

在编辑器左上方的工具栏，找到 View -> Tool Windows，点击 Previewer。

在 Previewer 的上方有一个图标 。

点击它之后可以显示一个工具面板 inspector，它的作用与浏览器 F12 差不多，可以直接了解 DOM 渲染的情况。

如下图，elif 条件flag == 'bar'，所以只将第二个 text 标签渲染到真实 DOM 中。

show

<div class="container">
    <text show="{{ flag == 'foo' }}">foo</text>
    <text show="{{ flag == 'bar' }}">bar</text>
    <text show="{{ flag == 'foobar' }}">foobar</text>
</div>

如下图，show 把所有的标签都渲染到真实 DOM 中了，其余没有显示的标签只是因为其样式为display: none;。

！注意：禁止在同一个标签上同时设置 for 和 if 属性。