데이터 바인딩의 일반적인 요구 사항은 엘리먼트의 클래스 목록과 인라인 스타일을 조작하는 것입니다. class와 style 모두 속성이므로 v-bind를 사용하여 처리할 수 있습니다. 문자열 외에 다른 값으로 바인딩하면 특별한 향상 기능을 얻을 수 있습니다.
HTML 클래스 바인딩 (Binding HTML Classes)
객체에 바인딩하기 (Binding to Objects)
v-bind:class에 객체를 전달하여 클래스를 동적으로 토글할 수 있습니다:
<div :class="{ active: isActive }"></div>위의 구문은 isActive 데이터 속성의 truthiness에 따라 active 클래스의 존재 여부가 결정된다는 것을 의미합니다.
객체에 더 많은 필드를 추가하여 여러 클래스를 토글할 수 있습니다. 또한 :class 디렉티브는 일반 class 속성과 공존할 수 있습니다. 따라서 다음과 같은 상태가 주어지면:
const isActive = ref(true)
const hasError = ref(false)그리고 다음과 같은 템플릿이 있다면:
<div
class="static"
:class="{ active: isActive, 'text-danger': hasError }"
></div>다음과 같이 렌더링됩니다:
<div class="static active"></div>isActive 또는 hasError가 변경되면 클래스 목록이 그에 따라 업데이트됩니다. 예를 들어, hasError가 true가 되면 클래스 목록은 "static active text-danger"가 됩니다.
바인딩된 객체는 인라인일 필요가 없습니다:
const classObject = reactive({
active: true,
'text-danger': false
})<div :class="classObject"></div>이것은 다음과 같이 렌더링됩니다:
<div class="active"></div>계산된 속성(computed property)을 반환하는 객체에 바인딩할 수도 있습니다. 이것은 일반적이고 강력한 패턴입니다:
const isActive = ref(true)
const error = ref(null)
const classObject = computed(() => ({
active: isActive.value && !error.value,
'text-danger': error.value && error.value.type === 'fatal'
}))<div :class="classObject"></div>배열에 바인딩하기 (Binding to Arrays)
:class에 배열을 전달하여 클래스 목록을 적용할 수 있습니다:
const activeClass = ref('active')
const errorClass = ref('text-danger')<div :class="[activeClass, errorClass]"></div>이것은 다음과 같이 렌더링됩니다:
<div class="active text-danger"></div>배열에서 조건부로 클래스를 토글하고 싶다면 삼항 표현식을 사용할 수 있습니다:
<div :class="[isActive ? activeClass : '', errorClass]"></div>이것은 항상 errorClass를 적용하지만, isActive가 true일 때만 activeClass를 적용합니다.
그러나 여러 조건부 클래스가 있는 경우 약간 장황할 수 있습니다. 그래서 배열 구문 내에서 객체 구문을 사용할 수도 있습니다:
<div :class="[{ active: isActive }, errorClass]"></div>컴포넌트에서 사용하기 (With Components)
이 섹션은 컴포넌트(Components)에 대한 지식이 있다고 가정합니다. 지금은 건너뛰고 나중에 다시 읽어도 괜찮습니다.
루트 엘리먼트가 하나인 컴포넌트에서 class 속성을 사용하면, 해당 클래스는 컴포넌트의 루트 엘리먼트에 추가되고 이미 존재하는 클래스와 병합됩니다.
예를 들어, 다음과 같은 템플릿을 가진 MyComponent라는 컴포넌트가 있다면:
/* MyComponent.vue */
export default {
template: `<p class="foo bar">Hi!</p>`
}그리고 사용할 때 일부 클래스를 추가한다면:
<MyComponent class="baz boo" />다음과 같이 렌더링됩니다:
<p class="foo bar baz boo">Hi!</p>클래스 바인딩도 마찬가지입니다:
<MyComponent :class="{ active: isActive }" />isActive가 true일 때, 렌더링된 HTML은 다음과 같습니다:
<p class="foo bar active">Hi!</p>인라인 스타일 바인딩 (Binding Inline Styles)
객체에 바인딩하기 (Binding to Objects)
:style은 JavaScript 객체 값에 바인딩하는 것을 지원합니다 - 이는 HTML 엘리먼트의 style 속성에 해당합니다:
const activeColor = ref('red')
const fontSize = ref(30)<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>camelCase와 kebab-case(따옴표로 묶어야 함) 키를 모두 사용할 수 있지만, camelCase가 권장됩니다:
<div :style="{ 'font-size': fontSize + 'px' }"></div>스타일 객체를 직접 바인딩하는 것이 더 깔끔한 경우가 많습니다:
const styleObject = reactive({
color: 'red',
fontSize: '13px'
})<div :style="styleObject"></div>다시 말하지만, 객체 구문은 종종 계산된 속성(computed property)과 함께 사용됩니다.
배열에 바인딩하기 (Binding to Arrays)
:style에 배열을 전달하여 동일한 엘리먼트에 여러 스타일 객체를 적용할 수 있습니다:
<div :style="[baseStyles, overridingStyles]"></div>자동 접두사 (Auto-prefixing)
Vue는 특정 CSS 속성에 v-bind:style을 사용할 때, 예를 들어 transform과 같이, 브라우저 공급업체 접두사가 필요한 경우 자동으로 감지하여 추가합니다.
다중 값 (Multiple Values)
스타일 속성에 다중 (접두사가 붙은) 값을 배열로 제공할 수 있습니다. 예를 들면 다음과 같습니다:
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>이것은 배열에서 브라우저가 지원하는 마지막 값만 렌더링합니다. 이 예제에서는 flex를 지원하는 브라우저에서 display: flex를 렌더링합니다.
