Lightning Web Component　templateタグで条件判定を使うサンプル

2023年8月11日

環境
Salesforce

構文
<template if:false={変数名}>
表示コード
</template>

<template if:true={変数名}>
表示コード
</template>

操作例
ボタンを押下するとフラグの値が変更されます。

JS側のコード

export default class ExampleComponent extends LightningElement {
    isChanged = false;

    changflg(){
        if ( this.isChanged ) {
            this.isChanged = false;
        } else {
            this.isChanged = true;
        }
    }
}

html側のコード

<template>
    <lightning-card>
        <template if:false={isChanged}>
            <p>値1: {isChanged}</p>
        </template>
        <template if:true={isChanged}>
            <p>値2: {isChanged}</p>
        </template>
        <lightning-button onclick={changflg} label="変更"></lightning-button>
    </lightning-card>
</template>