JavaScript LWC　条件付きディレクティブを使用するサンプル

2024年6月23日

環境
Windows 11Pro 64bit
Google Chrome 126.0.6478.115（Official Build） （64 ビット）

概要
従来の if:true や if:false ディレクティブが、lwc:if、lwc:elseif、
lwc:else 条件付きディレクティブに置き換わりました。

使用例

<!-- conditionalExample.html -->
<template>
   <template lwc:if={isTemplateOne}>
        テンプレート one.
   </template>
   <template lwc:else>
       テンプレート two.
</template>

lwc:elseif と lwc:else はどちらも、同階層の lwc:if または
lwc:elseif のすぐ後ろに続ける必要があります。

expression1 が truthy を返す場合は、他のどのプロパティ getter にもアクセスしません。

<!-- example.html -->
<template>
    <template lwc:if={expression1}>
        処理コード 1
    </template>
    <template lwc:elseif={expression2}>
        処理コード 2
    </template>
    <template lwc:else>
        処理コード 3
    </template>
</template>