angular 样式属性绑定-优快云博客

本文通过实例展示了Angular中双向数据绑定和样式绑定的应用。包括按钮点击事件处理、输入框值变化监听、表格单元格的属性及样式绑定等。同时介绍了如何使用属性绑定改变元素属性，以及通过样式绑定动态调整元素样式。

<button (click)="onClick($event)">点我</button>
<input type="text" (input)="onInput($event)" value="1">
<table>
  <tr>
    <td [attr.colspan]="colspan" class="a b" [class.c]="isBool"> 你好</td>
  </tr>
</table>

<table>
  <tr>
    <td [ngClass]="ngClassA"> 你好</td>
  </tr>
</table>

<table>
  <tr>
    <td [style.color]="isDev ? 'red': 'blue'"> 你好</td>
  </tr>
</table>

<table>
  <tr>
    <td [style.font-size.em]="isDev ? 3: 1"> 你好</td>
  </tr>
</table>

<table>
  <tr>
    <td [ngStyle]="ngStyleA"> 你好</td>
  </tr>
</table>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-bind',
  templateUrl: './bind.component.html',
  styleUrls: ['./bind.component.css']
})
export class BindComponent implements OnInit {

  private colspan = 2;
  private myclass: string;
  private isBool: boolean;
  private ngClassA;
  private isDev = false;
  private ngStyleA;

  constructor() { }

  ngOnInit() {
    this.ngClassA = {
      a: false,
      b: false,
      c: false
    };
    this.ngStyleA = {
      background: 'yellow',
      color: 'red'
    };
    setTimeout(() => {
      this.isBool = true;
      this.isDev = true;
      this.ngClassA = {
        a: true,
        b: true,
        c: true
      };
      this.ngStyleA = {
        background: 'red',
        color: 'yellow'
      };
    }, 3000);
  }

  onClick($event) {
    console.log($event);
  }
  onInput($event) {
    console.log($event.target.value);
    console.log($event.target.getAttribute('value'));
  }
}

.a{
    background: yellow;
}
.b{
    color: red;
}
.c{
    font-size: 20px;
}

转载于:https://www.cnblogs.com/chenyishi/p/8920367.html