1

  • 尝试使用每个按钮单击创建一个列表。

  • 我想在 ul 元素中附加 li 标签。OnClick 我已经创建了 addList 函数。

  • 处理点击事件。

    这是代码。

render() {
    return html`
    <input oninput="${this.getNewVal}" id="name" type="text" value="${this.name}">
    <button onclick="${this._addList}" type="button">Add</button>
    <p class=${classMap(this.classes)} style=${styleMap(this.styles)}>Hello, ${this.name}!</p>
    <ul></ul>
    `;
  }

function addList(){
    this.listItems.push(this.name);
}
4

1 回答 1

2

你基本上需要做的是：

  1. 有一个数组来存储列表中的项目
  2. 单击按钮时向所述数组添加新元素
  3. map使用指令数组的任一函数渲染列表repeat（取决于您是否将重新排序所述项目，一个可能比另一个更有效）

这是一个看起来如何的示例（取自lit.dev 教程）

import {LitElement, html} from 'lit';

class ToDoList extends LitElement {
  static properties = {
    listItems: {},
  };

  constructor() {
    super();
    this.listItems = [
      {text: 'Start Lit tutorial', completed: true},
      {text: 'Make to-do list', completed: false},
    ];
  }

  render() {
    return html`
      <h2>To Do</h2>
      <ul>
        ${this.listItems.map((item) => html`<li>${item.text}</li>`)}
      </ul>
      <input id="newitem" aria-label="New item">
      <button @click=${this.addToDo}>Add</button>
    `;
  }

  get input() {
    return this.renderRoot?.querySelector('#newitem') ?? null;
  }

  addToDo() {
    this.listItems.push({text: this.input.value, completed: false});
    this.input.value = '';
    this.requestUpdate();
  }
}
customElements.define('todo-list', ToDoList);

您可能想看看lit 文档的模板部分，或者只是按照我上面提到的教程

于 2021-09-22T08:17:25.753 回答