클래스 바인딩
vue에서는 클래스 속성을 여러개 지정할 수 있다.
객체 리터럴을 통해 쉼표로 구분하여 key value 형태로 작성할 수 있다.
<h1 :class="{ active: isActive, small: isSmall }" class="title">{{ msg }}</h1>key와 value가 이름이 같으면 축약할 수 있다.
<h1 :class="{ active, small }" class="title">{{ msg }}</h1>아래 예제는 active 변수가 true면 active 클래스가 지정되고 false면 제거되는 로직이다. small도 동일하다.
BEM 방법론과 같이 특수문자를 사용하여 클래스를 만드는 경우는 ''로 감싸야 한다.
''로 감쌀 경우 여러 개의 클래스를 동시에 추가할 수도 있다.
class 속성에 객체 데이터를 직접 연결할 수도 있다.
만약 객체 데이터 내부에서 반응형 데이터를 활용해야 한다면 computed 옵션을 통해 계산된 데이터로 만들어서 this 키워드로 활용해야 한다.
배열 데이터로도 클래스를 지정할 수 있다.
<h1 :class="['active', 'title']">Hello Vue!</h1>클래스로 지정한 배열 데이터를 동적으로 변경하는 예시
스타일 바인딩
스타일도 클래스와 마찬가지로 객체 리터럴을 사용하여 여러개의 스타일을 나열할 수 있다.
추가로 하나의 이벤트에 여러개의 메서드를 바인딩 할 때 메서드명 뒤에 소괄호()를 사용하고 세미콜론으로 구분한다.
<div @click="toBlue(); increaseWidth()"></div>객체 리터럴로 스타일 바인딩 예시
객체 데이터로 직접 연결하려고 styleObject 데이터를 만들고 h1 태그의 style 속성에 할당을 하였다.
하지만 color의 데이터는 동적 데이터가 아니고, width 데이터는 문자열이라 increaseWidth 함수가 제대로 동작하지 않는 문제가 발생한다.
computed 옵션을 사용하여 계산된 데이터로 만들어서 사용하면 해결된다.
클래스와 마찬가지로 대쉬 케이스로 작성할 때는 따옴표로 감싸주어야 한다.
하지만 vue.js가 카멜 케이스에서 대쉬케이스로 자동으로 변환해 주기 때문에 카멜 케이스로 작성하면 된다.
여러 개의 스타일 객체들을 적용할 때는 배열 리터럴로 작성해주면 된다.
만약 중복되는 스타일 속성이 있다면 배열 리터럴에서 나중에 작성한 스타일 객체의 값으로 덮어쓴다.
