如何使用属性作为 <input> 的值？

Question

我希望将反应式属性“绑定”到

<input>

元素的值。我可以使用各种方法来实现这一点，例如使用

@change(...)

，但我想知道是否有更规范的方法？

import {html, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  @property()
  name: string = 'Somebody';

  render() {
    return html`
        <input .value=${this.name}>
        <p>Hello, ${this.name}!</p>
        `;
  }
}

在这里尝试一下

Answer 1

按如下方式使用

input Event Listener

：

import { html, css, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue }`;
  
  @property()
  name = 'Somebody';

  render() {
    return html`
      <input .value=${this.name} @input=${this._onInput}>
      <p>Hello, ${this.name}!</p>
    `;
  }

  private _onInput(event: Event) {
    this.name = (event.target as HTMLInputElement).value;
  }
}

演示代码