[Vue] v-bind와 클래스 바인딩을 해보자
오늘은 v-bind와 클래스 바인딩에 대해서 알아보자~
평소에 개발을 하면서 v-bind를 잘 쓰지 않고 거의 v-model만 사용하였다.
왜? v-model은 양방향 바인딩이 되지만, v-bind는 단방향 바인딩이기 때문... 이상하게 v-model을 많이 썼더랬라..
그리고 요즘 css를 적용할 때 동적으로 클래스를 바인딩 하는 경우가 있어 정리 해보려 한다~~
v-bind란???
Vue에서 제공하는 디렉티브로
우선 위와 같이 필요한 라이브러리 및 js파일을 import 하였다.
그럼 id값이 bindTest인 ( el 옵션은 Vue 인스턴스에 연결할 HTML DOM 요소를 지정합니다! ) 영역에 Vue 인스턴스를
연결할테고, 해당 텍스트 영역에 bindValue의 값인 "아이스 아메리카노!" 가 화면에 표시되기를 원한다.
하지만 실제로 실행하면 다음과 같은 결과가 화면으로 표출된다.
"아이스 아메리카노!" 가 아닌 "bindValue"라는 값이 그대로 출력되었다.
답은 간단하다. 해당 value로 넣은 값이 변수가 아닌 문자열로 인식하기 때문(중요)
이럴 때 Vue의 데이터로 바인딩 시켜주는 것이 v-bind이다.
v-bind 사용법은 간단하다. 내가 원하는 속성 앞에 v-bind: 또는 약어인 : 를 붙여주기만 하면 된다. 그럼 다음과 같이
된다.
위와 같이 변경 되었다. 주의할 점은 v-bind는 v-model과는 다르게 단방향 바인드이기 떄문에
변수의 값이 바뀌면 화면상의 value값도 동적으로 변하지만, 화면상의 value값을 변경한다고 실제 data가 변경되지는
않는다는 점이다.(중요)
 |
 |
 |
이렇게 다른 속성들에도 v-bind를 활용하여 단방향 바인딩을 할 수 있다.
v-bind를 이용하면 클래스 또한 동적으로 변경할 수 있는 데 이것을 클래스 바인딩이라고 한다.
주로 개발을 하면 클래스명으로 css를 주게 되는데, 이때 클래스 바인딩을 활용할 수 있다.
간단히 다음 이미지를 보면 이해가 될 것이다.
 |
 |
 |
위와 같이 코드를 작성하였다. 각 이미지의 의미는 다음과 같다.
1. 각 클래스명에 줄 스타일을 선언
2. boolean값을 가지는 데이터를 선언 및 해당 데이터를 true로 변환하는 메서드 생성
3. 버튼을 클릭하면 changeColor라는 함수를 호출하고 isActive라는 데이터를 true로 변경.
v-bind:class에서 isActive라는 값이 true면 클래스 명으로 각각 red, blue, green을 부여함
그럼 다음과 같은 화면이 출력 된다.
 |
 |
버튼을 클릭하니 각 해당 text의 색상이 변경 된 것을 확인 할 수 있다.
버튼을 클릭하기 전에는 클래스명이 존재하지 않았지만 클릭하는 순간 클래스명이 부여되며, 스타일이 적용되는 것이다.
오늘은 v-bind와 클래스 바인딩에 대해서 알아보았다. 클래스 바인딩은 요즘 css를 줄 때 많이 사용되는 방식으로
잘 활용할 수 있게 되면 좋을 것 같다. 클래스 바인딩에는 객체 구문, 배열 구문, 다중 구문 등도 있고, 이를 컴포넌트에서
활용 할 수 있는 방법도 있는데, 길이 너무 길어져 이건 다음에 정리를 해보아야겠다.