循环 LWC 的模板

Lightning Web Components(LWC) 是一款基于 Web 标准开发的 UI 框架，可以与其他 Salesforce 平台和工具完美融合，使构建高度优化的 Web 应用程序更加容易快捷。其中，一个常见的需求是循环渲染数据，LWC 中也提供了相应的模板，下面就让我们来探讨一下循环 LWC 的模板。

1. for:each

使用 for:each 可以很方便地循环渲染数组中的元素。具体使用方法如下：

<template>
  <lightning-card title="循环 LWC 的模板">
    <div class="slds-m-around_medium">
      <template for:each={items} for:item="item">
        <div key={item.id}>
          <p>{item.name}</p>
        </div>
      </template>
    </div>
  </lightning-card>
</template>

其中，items 是一个包含多个元素的数组，我们可以通过 for:each 将其逐一渲染到模板中。

2. for:index

如果我们需要获取数组中元素的索引，可以使用 for:index，示例代码如下：

<template>
  <lightning-card title="循环 LWC 的模板">
    <div class="slds-m-around_medium">
      <template for:each={items} for:item="item" for:index="index">
        <div key={item.id}>
          <p>{index + 1}.{item.name}</p>
        </div>
      </template>
    </div>
  </lightning-card>
</template>

需要注意的是，索引从 0 开始，因此我们可以通过 + 1 进行修正。

3. for:item 和 for:index 的组合使用

如果我们需要同时获取数组中元素的值和索引，可以使用 for:item 和 for:index 的组合，示例代码如下：

<template>
  <lightning-card title="循环 LWC 的模板">
    <div class="slds-m-around_medium">
      <template for:each={items} for:item="item" for:index="index">
        <div key={item.id}>
          <p>{index + 1}.{item.name}</p>
          <p>描述：{item.description}</p>
        </div>
      </template>
    </div>
  </lightning-card>
</template>

以上是循环 LWC 模板的常见用法，希望对大家有所帮助！