클래스 동적 바인딩
코드 예제
코드 복사하기
→ :class 선언은 동적바인딩 기능을 사용할 수 있게 한다. 중괄호로 객체를 사용할 수 있는데,
내부에 선언된 키값이 스타일 내부에 있는 클래스 명이랑 일치하게되면, true/false로 적용할 지 안할지 적용할 수 있다.
→ true/false를 반응형으로 설정하고 isActive에 할당한다
토글로 상태를 변경해서 스타일을 적용하였다.
특징
이렇게 일반 클래스속성과 클래스 바인딩 속성이 같이 공존할 수 있다.
•
active가 false인 경우
이렇게 class가 원래 선언되어있는 대로 text만 남아있다.
•
active가 true인 경우
true가 되면 이렇게 속성이 원래 class속성에 합쳐지게 된다.
hasError 추가해보기
→ text-danger 같이 한 단어가 안되는 요소는 ‘’ 홑 따옴표로 묶어줄 수 있다.
→ 버튼에서 “” 쌍 따옴표 내부에 로직을 넣을 수 있다. (간단한 것만 넣자.)
→ ref 로 반응형 속성을 정의한다. (변할 수 있다는 뜻이지)
→ 스타일 내부에 정의된 text-danger 는 동적 바인딩 객체내부의 키값이랑 글자가 같아야되고, 해당 밸류값이 true일 때만 스타일이 적용된다.
•
확인
이렇게 확인 가능하다.
혹시 선언해야 될 게 많다면, Object로 선언해서 사용할 수 있다.
이렇게 오브젝트로 사용 가능
•
computed 로도 사용가능
내부 리턴값은 변수적용 안됨
•
객체 배열을 동적바인딩하는 것도 가능
클래스가 배열이라도 잘 들어간다.
•
삼항 연산자도 들어간다.
스타일 동적 바인딩
객체로 바인딩 하기
글자크기 조절 버튼으로 크기 조절하기
→ fontSize를 반응형으로 선언
→ StyleObejct에 바인딩
→ 버튼으로 fontSize 값을 직접 변경 → 반영됨
•
확인
글자 크기 변경됨