Lit 支持在模板中直接渲染可迭代的项，但你通常需要渲染一个使用这些项的_模板_，而不是直接渲染项本身。

Lit 提供了一个内置的 map() 指令，让你可以转换可迭代对象中的项。map() 指令适用于各种可迭代对象，包括数组、集合、映射，甚至生成器。它返回一个可迭代对象，其中包含对每一项调用提供的回调函数的结果。

在这个示例中，你将获得一个自定义元素，它有一个名为 items 的状态属性，其中包含一组字符串。

将集合中的每一项渲染为包含该字符串的列表项（<li>）。首先导入 map() 指令。

// my-element.ts
import {map} from 'lit/directives/map.js';

// my-element.js
import {map} from 'lit/directives/map.js';

在组件的模板中使用该指令，提供一个回调函数，该函数返回一个用 <li> 标签包裹每一项的模板，并将其放在 <ul> 标签内。

// my-element.ts
  render() {
    return html`
      ⋮
      <ul>
        ${map(this.items, (item) => html`<li>${item}</li>`)}
      </ul>
    `;
  }

// my-element.js
  render() {
    return html`
      ⋮
      <ul>
        ${map(this.items, (item) => html`<li>${item}</li>`)}
      </ul>
    `;
  }

每一项的索引也会提供给回调函数。详情请查看 map 文档。

额外练习：尝试使用索引为每个列表项添加序号。