Vuejs 2 . 클래스 바인딩 & 스타일 바인딩

1. 클래스 바인딩

아래는 버튼을 클릭하면 클래스를 바인딩하여 스타일을 부여하는 예제입니다.

 

먼저 <div>에 v-bind:class="{ 클래스: 변수 }를 넣어주었습니다. 예제에서는 v-bind:를 : 로 줄여서 적었습니다.

그 다음 데이터에 해당 변수값 false를 주었습니다. 그러면 일단 버튼을 클릭하기 전까지는 <div>에 클래스가 없는 상태가 될것입니다.

그리고 메소드에 update()함수를 만들어 변수가 true가 되도록 작성한뒤, 이 함수를 <button>의 클릭이벤트값으로 넣어주었습니다. 주석표시한 부분처럼 작성해도 결과는 같습니다.

버튼을 클릭하기 전에는 <div>의 클래스가 없다가 버튼을 클릭하면 변수가 true가 되었으니 클래스가 생기면서 폰트의 컬러는 레드로, 사이즈는 40px로 바뀌게 됩니다.

 

**클래스명에 하이픈이 들어가면 ' '를 사용하여 스트링으로 만들어주어야합니다.

 

위에서 사용한 방법은 객체 구문입니다. 

배열 구문을 사용해되고, 삼항연산자를 써도됩니다.

아래의 링크에서 여러 구문으로 사용하는 예제를 볼 수 있습니다.

https://kr.vuejs.org/v2/guide/class-and-style.html

클래스와 스타일 바인딩 — Vue.js

 

2. 스타일 바인딩

font-size처럼 -(하이픈)이 들어가는 경우는 'font-size'로 적거나 fontSize로 작성해야 합니다.

데이터에 변수를 넣어주고 스타일값으로 변수명을 가져다 쓰면 스타일바인딩을 할 수 있습니다.

 

 

 

 

 

**위의 정리 내용은 유튜버 코지코더님의 Vue.js강의를 보고 정리한 내용입니다.

유튜브를 보면서 정리된 글을 보면 더 좋을것같아요!