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 屬性。