Блог

• Попытка создать список с помощью каждого нажатия кнопки.
• Я хочу добавить тег li в элемент ul. OnClick Я создал функцию добавления списка.
• Обработайте событие щелчка.

  Вот код.

 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);
}
 

Что вам в основном нужно сделать, так это:

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 или просто пройти обучение, о котором я упоминал выше