Vue 공식 가이드 : kr.vuejs.org/v2/guide/class-and-style.html
클래스와 스타일 바인딩 — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
kr.vuejs.org
오늘은 클래스와 스타일 바인딩 !!
위에서 <head > 태그 아래 생성한 .red 와 .blod 클래스를 사용해 보겠다.
다음엔 클래스 바인딩을 적용해 보도록 하겠다.
바인딩을 하기위해 class 앞에 콜론을 붙여준뒤
아래 data 부분에 isRed 의 값을 선언해 준다.
isRed 가 True 면 red에 값이 class 에 들어가고 false 시 바인딩이 안된다.
보기와 같이 맨 처음 브라우저에서는 class 에 값이 없다. 이유는 isRed 가 false 이기 때문이다.
클릭 버튼 클릭 !
isRed 의 값이 True 가 되므로 red 가 class 에 바인딩 된 모습이다.
Click 버튼 클릭과 함께 값이 True 로 변환되며 class에 red 값과 bold 가 적용된걸 확인할 수 있다.
다음은 클래스 대신에 스타일을 바인딩 해보자 !
data 에 스타일에 들어갈 값을 선언해 주고 위와 같이 선언해 준다.
CSS 에서 사용하는 단어이지만 자바에서 사용하는 객체이기 때문에 font-size 는 fontSize 로 위와같이 선언해 줘야 한다.
코딩에는 fontSize 로 했지만 브라우저에서는 font-size 로 자동 적용된 모습을 확인할 수 있다.
'Vue. JS' 카테고리의 다른 글
| 09 v-fi 와 v-show (0) | 2021.02.08 |
|---|---|
| 07 Watch 속성 (0) | 2021.02.03 |
| 06 Computed 속성 (0) | 2021.02.03 |
| 05. 데이터 양방향 바인딩 (Data Two Way Binding) (0) | 2021.01.31 |
| 04. 이벤트(Event) (0) | 2021.01.31 |