下面是我的 .ts 文件,
import { Component } from '@angular/core'; @Component({ selector: 'app-event-binding', templateUrl: './event-binding.component.html', styleUrls: ['./event-binding.component.css'] }) export class EventBindingComponent { textColor = ''; onInput = (ev: any) => { this.textColor = ev.target.value; } }
下面是我的 HTML 模板,
<div> <h3 [style.color]="textColor">EVENT BINDING</h3> <input type="text" (input)="onInput($event)"> </div>
這裡當我在輸入框中完全輸入「blue」時,我的 h3 文字顏色會更改為藍色。 但我注意到當我按退格鍵並且現在 textColor 的值為“blu”時,文字仍然保持藍色。我期待著回到黑色。 只有當我清除整個輸入時它才會變為黑色。 那麼html中的顏色是否保留了某種歷史呢?這是什麼作用?
P粉1868974652024-04-02 12:55:00
使用純 JavaScript 操作 DOM 時也會發生同樣的情況,我為您準備了一個範例:
document.querySelector('input').addEventListener('input', event => { document.querySelector('h3').style.color = event.target.value; })
EVENT BINDING