Angular10 のクラスとスタイルのバインディングに関する簡単な説明

この記事では、Angular のクラスとスタイル バインディングについて紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Angular101.# の class と

style

のバインディング#classBinding

バインディングの種類構文入力の種類入力値の例 単一クラス バインディング[class.foo]='flag'boolean|unknown|null true、false複数のクラス バインディング[class]='classExpr'string'my-class1 my-class2'#関連する推奨事項: "

		{[key :string]:boolean |未定義 | null} Array	{foo: true, bar: false} ['foo ','bar']

angular チュートリアル

"1.1 単一属性バインディング

1. 基本構文

<p>
    <button>修改flag的值</button></p>

2.式の値が true の場合、

Angular

はこのクラスを追加し、false の場合、<pre class="brush:php;toolbar:false">flag = truechangeFlag():void {     this.flag = !this.flag}</pre> 3 を削除します。 flag

が true

4. flag

が false の場合

1.2 複数の属性バインディング - 文字列形式

1、文字列フォーム

<p>绑定字符串的class</p>

classExpr:string = 'class-expr1 class-expr2 class-expr3'

2、バインディング結果

1.3 複数の属性バインディング - オブジェクトフォーム

1、オブジェクト形式

<p>绑定对象形式的class</p>

classExpr:object = {
    'foo': true,
    'bar': false}

2、バインディング結果

1.4 複数の属性バインディング-配列形式

1、配列形式

<p>绑定数组形式的class</p>

classExpr:Array<string> = ['foo','bar']</string>

2、バインディングの結果

2. style

バインディング

バインディングの種類構文入力タイプ入力値の例単一スタイル バインディング[ style.width]=“width”文字列未定義 null "100px"単位を使用した単一のスタイル バインディング[ style.width.px]="width"number 未定義 null100複数のスタイル バインディング[スタイル] ="styleExpr"string 2.1 単一属性

	{[キー: 文字列]: 文字列未定義 null}	"幅: 100px; 高さ: 100px" {幅: '100px', height: '100px'}

1. 単一属性の形式

<p>绑定单个形式的style</p>

styleExpr:string = '100px'

2. バインディング結果

# 2.2 単一属性 (ユニット

##1、ユニット #

<p>绑定单个形式的style</p>

2、バインディング結果

)

##2.3 複数の属性バインディング

<p>绑定多个形式的style</p>

1、文字列

styleExpr:string = 'width: 100px;height: 200px'

2、オブジェクト

styleExpr:object = {
    width: '100px',
    height: '200px'}

3、結果グラフ

#プログラミング関連の知識について詳しくは、

プログラミング ビデオ

をご覧ください。 ！

以上がAngular10 のクラスとスタイルのバインディングに関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。