Svelte 之 Conditional Rendering | 點燈坊

根據不同 Data 條件動態 Render 出 HTML 也是現代前端必備功能，Svelte 也提供了 if、else 與 else if 處理。

Version

macOS Catalina 10.15.1
WebStorm 2019.2.4
Svelte 3.0.0

if

將 Checkbox 綁定到 isShowEmail，然後 if 可動態根據 isShowEmail 結果 render HTML。

Else

既然提供了 if，自然也提供了 else。

Else If

若條件更複雜，Svelte 也提供了 else if 判斷。

Conclusion

• Conditional compilation 的 if 雖然看起來風格比較老套，但可讀性尚可，且也足夠實務上應用

Reference

Svelte, Logic / If blocks
Svelte, Logic / Else blocks
Svelte, Logic / Else-if blocks