[Vue] v-bind와 클래스 바인딩을 해보자

오늘은 v-bind와 클래스 바인딩에 대해서 알아보자~

평소에 개발을 하면서 v-bind를 잘 쓰지 않고 거의 v-model만 사용하였다.

왜? v-model은 양방향 바인딩이 되지만, v-bind는 단방향 바인딩이기 때문... 이상하게 v-model을 많이 썼더랬라..

그리고 요즘 css를 적용할 때 동적으로 클래스를 바인딩 하는 경우가 있어 정리 해보려 한다~~

 

v-bind란???

 

Vue에서 제공하는 디렉티브로 

 

jsp 코드

js 코드

우선 위와 같이 필요한 라이브러리 및 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를 줄 때 많이 사용되는 방식으로

잘 활용할 수 있게 되면 좋을 것 같다. 클래스 바인딩에는 객체 구문, 배열 구문, 다중 구문 등도 있고, 이를 컴포넌트에서

활용 할 수 있는 방법도 있는데, 길이 너무 길어져 이건 다음에 정리를 해보아야겠다.