반응형
Vue에서 동적으로 스타일과 Class를 추가하면 편리하게 사용할 수 있습니다.
1. Class 추가하기
v-bind:class 또는 :class를 이용해서 추가합니다.
active 클래스를 isActive 데이터가 true이면 추가하게 됩니다.
<div v-bind:class="{ active: isActive }">Hello, Vue!</div>2. 배열로 Class 추가하기
2개 이상의 클래스를 동적으로 추가할 때, 배열을 사용합니다.
isActive, isHighlighted 값이 true 이면 각각 active, highlight 클래스를 추가합니다.
<div v-bind:class="[{ active: isActive }, { highlight: isHighlighted }]">Hello, Vue!</div>3. 조건에 따라서 Class 추가하기
삼항연산자를 이용해서 클래스를 추가할 수 있습니다.
<div :class="isActive ? 'active' : 'default'"></div>4. 스타일 추가하기
v-bind:style 또는 :style를 이용해서 스타일을 추가할 수 있습니다.
스타일을 동적으로 추가할 수 있지만, 다른 inline style이 적용되지 않기 때문에 자주 사용하지는 않습니다.
<div v-bind:style="{ color: 'red' }">Hello, Vue!</div>728x90
반응형