创建列表对于渲染重复图案也很有用，例如棋盘。

range() 指令提供了一种简单的方式来创建递增整数的可迭代对象，可以与 map() 指令配合使用，以编程方式方便地渲染模板列表。嵌套使用可以创建多维图案。

示例组件已经定义了一些样式来创建一个 8x8 的棋盘，用 <div> 填充，背景颜色将通过添加 "black" 或 "white" 类名来确定。

首先导入这两个指令。

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

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

使用这些指令创建像国际棋盘那样的黑白方格。

// my-element.ts
  render() {
    return html`
      ⋮
      <div id="board">
        ${map(range(8), (row) => map(range(8), (col) => html`
          <div class="${getColor(row, col)}">${getLabel(row, col)}</div>
        `))}
      </div>
    `;
  }

// my-element.js
  render() {
    return html`
      ⋮
      <div id="board">
        ${map(range(8), (row) => map(range(8), (col) => html`
          <div class="${getColor(row, col)}">${getLabel(row, col)}</div>
        `))}
      </div>
    `;
  }

这就像嵌套的 for 循环一样来生成二维网格。

range() 指令用于生成从 0 到 7 的整数可迭代对象，然后传入 map() 指令。对于每个 row 整数，会生成一个从 0 到 7 的 column 整数范围，并映射为一个 <div>。类名和文本内容由 row-column 坐标决定。

range() 指令的输出可以通过提供额外参数来自定义，这些参数控制 start、end 和递增步长 step。请参阅 range 文档。