Angular10의 클래스 및 스타일 바인딩에 대한 간략한 토론

이 글에서는 Angular의 클래스와 스타일 바인딩을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Angular10Angular10中class和style的绑定

1.class绑定

绑定类型	语法	输入类型	输入值范例
单个类绑定	[class.foo]=‘flag’	boolean|undefined|null	true,false
多个类绑定	[class]=‘classExpr’	string {[key:string]:boolean | undefined | null} Array	‘my-class1 my-class2’ {foo: true, bar: false} [‘foo’,‘bar’]

相关推荐：《angular教程》

1.1 单属性绑定

1、基本语法

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

2、当表达式的值为真的时候，Angular就会加上这个类，为假的时候就会移除

flag = truechangeFlag():void {
    this.flag = !this.flag}

3、当flag为真的时候

4、当flag为假的时候

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

1.class 바인딩바인딩 유형Syntax입력 유형입력 값 예단일 클래스 바인딩[class.foo]='flag'boolean|undefine|nulltrue, false 다중 클래스 바인딩[class]='classExpr'stringArray 'my-class1 my- class2'['foo','bar']관련 권장사항: "angular tutorial1.1 단일 속성 바인딩1. 기본 구문

에서 클래스 및 스타일 바인딩
			{[key:string]:boolean | undefine | null}
{foo: true, bar: false}			》

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

2 표현식의 값이 true인 경우 Angular가 추가됩니다. 이 클래스이며 false이면 제거됩니다

styleExpr:string = '100px'

3. 플래그가 true일 때

4. 플래그가 false인 경우

1.2 다중 속성 바인딩 -문자열 형식

1, 문자열 형식

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

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

2, 바인딩 결과

1.3 다중 속성 바인딩 - 개체 양식

1, 개체 양식

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

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

2, 바인딩 결과

1.4 다중 속성 바인딩-배열 형식

1. 배열 형식

rrreeerrreee2. 바인딩 결과

입력 값 예

🎜🎜🎜🎜🎜단일 스타일 바인딩 정의 🎜🎜[style.width] = "width" 🎜🎜string undefine null 🎜🎜"100px" 🎜🎜🎜🎜단일 스타일 바인딩 🎜🎜[ 스타일 .width.px] = "너비" 🎜🎜숫자 정의되지 않은 null🎜🎜100🎜🎜🎜🎜다중 스타일 바인딩🎜🎜[style]="styleExpr"🎜🎜string 🎜 {[key: string]: string undefine null}🎜🎜 "너비: 100px; 높이: 100px" 🎜{ 너비: '100px', 높이: '100px'}🎜🎜🎜🎜🎜2.1 단일 속성🎜🎜1. 단일 속성의 형태🎜rrreeerrreee🎜2. 🎜2.2 단위가 있는 단일 속성🎜🎜 1. 단위가 있는 🎜rrreee🎜2. 바인딩 결과 🎜🎜🎜🎜🎜2.3 여러 속성의 바인딩 🎜rrreee🎜1. 개체 🎜rrreee🎜3. 결과 그래프 🎜 🎜🎜🎜 🎜프로그래밍 관련 지식을 더 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 Angular10의 클래스 및 스타일 바인딩에 대한 간략한 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!