AngularJSにおける括弧の役割の詳細な説明

AngularJSにおける括弧の役割の詳細な説明

1. 括弧の役割

1.1 角括弧 [ ]

属性名が角括弧で囲まれている場合、右側には式の値が割り当てられます <br /> 属性に角括弧がない場合、右側には文字列が割り当てられます

<div class="red">red</div> //ここでのクラス名は red です
<div [class]="red">red</div> //ここでのクラス名はblueです。つまり、角括弧の右側は式です。 //コンポーネントredでは: string = "blue";

1.2 括弧()

括弧はイベントバインディングに使用され、要素上でイベントをトリガーし、バインドされたメソッドが応答します。

<div (click)="go()">gogo</div> //括弧内にイベントを入れる //コンポーネントクラス go() {
 //表現...
}

1.3 中括弧 { { }}

中括弧{ {expression}}このメソッドは補間と呼ばれ、テンプレートに配置することができます

<div>{{good}}</div> //<div>こんにちは</div> 
 
//コンポーネントクラス good: string = "Hello";

1.4 文字列変数${ }

tes: 文字列 = "ワールド";
テスト: 文字列 = `Hello ${goo}`; //テスト: 文字列 = "Hello World";

1.5 [()]

双方向バインディング操作によく使用されます

<input [(ngModel)]='test_input' /> // 値= 'testNgClick'
 
//コンポーネント内 test_input: any = 'testNgClick';

AngularJS における括弧の役割に関するこの記事はこれで終わりです。AngularJS における括弧の役割についてさらに詳しく知りたい場合は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Angular のパフォーマンス最適化: サードパーティ コンポーネントと遅延読み込みテクノロジー
  • Angularフレームワークのビュー抽象定義の詳細な説明
  • Angular SMS テンプレート検証コード
  • Angularにng-zorroを導入する際の問題に関する簡単な分析
  • Angular+IonicはqueryParamsを使用してページジャンプ値の転送を実装します
  • Angularでシンプルなユニットテストを実装する例
  • AngularJs の $http は POST リクエストを送信しますが、PHP は Post データを受信できません。問題と解決策
  • 折りたたみと展開の効果を実現するための Angular+ionic のサンプルコード
  • Angular の 12 の典型的な問題について簡単に説明します

<<:  yum を使用して rpm と関連する依存関係をダウンロードして、docker をオフラインでインストールします。

>>:  CentOS6.7 mysql5.6.33 でデータファイルの場所を変更する方法

推薦する

MySQL 関数インデックス最適化ソリューション

MySQL を使用する場合、多くの開発者は一部の列に対して関数計算を実行することが多く、その結果、イ...

MySQLの7種類のログの概要

MySQL には次のログ ファイルがあります。 1: 再実行ログ2: ロールバックログ(元に戻すログ...

bash のスクリプトデバッグメカニズムの詳細な説明

スクリプトをデバッグモードで実行するbash -x <script> を使用すると、スク...

MySQL 接続例外とエラー 10061 の解決方法

MySQL は、スウェーデンの会社 MySQL AB によって開発されたリレーショナル データベース...

MySQL Truncate の使用方法の詳細な説明

目次MySQL 切り捨ての使用1. 構文を切り捨てる2. Truncateの使用上の注意3. TRU...

Vue での ref の使用法とデモンストレーション

ref 定義:要素またはサブコンポーネントの参照情報を登録するために使用されます。参照情報は、親コン...

Vueのレスポンシブシステムの原理の詳細な説明

目次Vueのレスポンシブシステムの基本原則1. Object.definePropertyの使い方を...

CSS 表示属性のインラインブロックレイアウト実装の詳細な説明

CSS 表示プロパティ注: !DOCTYPE が指定されている場合、Internet Explore...

画像をハイパーリンクとして使用したときに表示される青いボックスを削除する方法

最近、Dreamweaver を使用して製品プレゼンテーションを作成し、画像にハイパーリンクを追加し...

MySQL の不正な文字列値の解決方法

MySQL を使用して中国語の文字を挿入すると、多くの友人から次のエラーが報告されます。 これは、文...

Docker-Composeコマンドの使い方の詳しい説明

Docker コンテナはさまざまな方法で管理およびデプロイできます。 Docker コマンドを直接使...

JavaScriptイベント実行メカニズムの深い理解

目次序文ブラウザJS非同期実行の原理ブラウザのイベントループ実行スタックとタスクキューマクロタスクと...

JSはGMTとUTCのタイムゾーンを完全に理解しています

目次序文1. GMT GMTとはGMTの歴史2. UTC UTCとはUTC は次の 2 つの部分で構...

HTML で JavaScript の全選択/全選択解除操作を実行するサンプル コード

コードをコピーコードは次のとおりです。 <html> <ヘッド> <m...

回転灯効果を実現するWeChatアプレットの例

序文日常の開発では、テキストの水平スクロール効果(一般にカルーセルと呼ばれる)によく遭遇します。これ...