angular 默認(rèn)數(shù)據(jù)改為單向綁定
數(shù)據(jù)綁定
- 插值表達(dá)式
<h1>{{title}}</h1>
- 使用方括號將HTML標(biāo)簽的一個(gè)熟悉綁定到一個(gè)表達(dá)式
<img [src]='imgURL'>
- 使用小括號將組件的控制器的一個(gè)方法綁定為模板上的一個(gè)事件處理器
<button (click)='toTitle()'>商品詳情</button>
事件綁定
<button (click)='toTitle()'>商品詳情</button>
- () 代表這是一個(gè)事件
- 括號里面的是事件名稱
- '' 里面執(zhí)行的表達(dá)式
- $event 瀏覽器事件對象
-
<button (click) = 'saved = true'>屬性賦值saved會被設(shè)置為true - HTML屬性是不變的，DOM屬性是可變的
DOM屬性綁定圖示
image.png
HTML屬性綁定(優(yōu)先使用DOM綁定 )
- 基本的html屬性綁定
<td [attr.colspan='tableColspan']>tabe</td>
- css類綁定
- 替換綁定
<div class='aaa bbb' [class]='some'>data</div> // 注意這個(gè)class會完完全全替換掉這里面的class
- 根據(jù)后面的 值true就添加
// special 是樣式名稱 some是返回一個(gè)boolean
<div class='aaa bbb' [class.special]='some'>data</div>
- 控制多個(gè)clss
//后臺可以直接綁定一個(gè)對象
<div [ngClass]='{aaa:isAAA}'>data</div>
- 樣式綁定
// 帶單位 style.font-size.rem
<div [style.color]='{isColor ? 'red':'green'}'>data</div>
//后臺可以直接綁定一個(gè)對象
<div [ngStyle]='{'color':isColor ? 'red':'green'}'>data</div>
HTML屬性綁定圖示
image.png
雙向綁定
- 數(shù)據(jù)雙向綁定
// 只有ngModel綁定才是雙向綁定的
<input [(ngModel)] = 'name'>
<p>{{name}}</p>
