Boolean のプロパティ

標準 HTML 要素の Boolean 属性は、要素に追加することにより、true に設定されます。この属性は、指定しない場合、デフォルト値は false になります。したがって、属性のデフォルト値は常に false となります。Lightning Web コンポーネントでは、Boolean のプロパティに対して同じ原理が使用されます。

プロパティの静的設定

Boolean の公開プロパティのデフォルト値は常に false に設定します。bool.js ファイルでデフォルト値を true に設定すると、マークアップで値を静的に false に切り替える方法はありません。

1// bool.js
2import { LightningElement, api } from "lwc";
3
4export default class Bool extends LightningElement {
5  @api show = false;
6}

HTML ファイルは次のようになります。

1<!-- bool.html -->
2<template>
3  <p>show value: {show}</p>
4</template>

親コンポーネントには、show 属性が <c-bool> に追加されていないためにデフォルト値の false を表示する c-bool があります。

マークアップで false と指定する唯一の方法は、Boolean 属性を省略することです。マークアップで show="false" に設定すると、true に評価されます。

Important

1<!-- parent.html -->
2<template>
3  <c-bool></c-bool>
4</template>

show プロパティを true に設定するには、show 属性を空白の値でマークアップに追加します。このバージョンの c-parent は、show プロパティで true を表示します。

1<!-- parent.html -->
2<template>
3  <c-bool show></c-bool>
4</template>

show の値は true ですが、setAttribute をコールして明示的に反映しない限り、表示される HTML には show 属性が反映されません。「HTML 属性への JavaScript プロパティの反映」を参照してください。

Boolean 属性の値が true になると、表示される HTML は <my-component my-attribute> になります。

Note

プロパティの動的設定

値を動的に切り替えるには、動的に計算された値を親コンポーネントから渡します。次に例を示します。

1<!-- parent.html -->
2<template>
3  <c-bool show={computedValue}></c-bool>
4</template>

JavaScript getter を parent.js で使用して {computedValue} の値を返します。

関連トピック

テンプレートでのデータバインド

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。