Lightning Web Component for:eachで繰り返し処理を行うサンプル
環境
sqlesforce
構文
template for:each={配列名} for:item="変数名"
「for:each」と「for:item」を使って、配列の要素
を繰り返し表示します。
1.JavaSciptファイル
配列の定義
listCity = [
{ Id: 11,Name:"東京" },
{ Id: 22,Name:"大阪" },
{ Id: 33,Name:"福岡" },
{ Id: 44,Name:"横浜" }
];
listCity = [
{ Id: 11,Name:"東京" },
{ Id: 22,Name:"大阪" },
{ Id: 33,Name:"福岡" },
{ Id: 44,Name:"横浜" }
];
listCity = [
{ Id: 11,Name:"東京" },
{ Id: 22,Name:"大阪" },
{ Id: 33,Name:"福岡" },
{ Id: 44,Name:"横浜" }
];
2.htmlコード
<template for:each={listCity} for:item="city">
<li key={city.Id}>
{city.Name}
</li>
</template>
<template for:each={listCity} for:item="city">
<li key={city.Id}>
{city.Name}
</li>
</template>
<template for:each={listCity} for:item="city">
<li key={city.Id}>
{city.Name}
</li>
</template>