Vue.js에서 매일 배워야 할 클래스와 스타일 바인딩

데이터 바인딩의 일반적인 요구 사항은 요소의 클래스 목록과 해당 인라인 스타일을 조작하는 것입니다. 둘 다 속성이므로 v-bind를 사용하여 처리할 수 있습니다. 표현식의 최종 문자열만 평가하면 됩니다. 그러나 문자열 연결은 번거롭고 오류가 발생하기 쉽습니다. 따라서 Vue.js는 클래스 및 스타일과 함께 사용될 때 v-bind를 특별히 향상시킵니다. 문자열 외에도 표현식의 결과 유형은 객체 또는 배열일 수도 있습니다.

HTML 클래스 바인딩

`{% raw %}class="{{ className }}"{% endraw %}`와 같이 Mustache 태그를 사용하여 클래스를 바인딩할 수 있지만, 이 쓰기 방법을 `v-bind:class`와 혼합하는 것은 권장되지 않습니다. 둘 중 하나만 선택하시면 됩니다!

객체 구문

v-bind:class 객체를 전달하여 클래스를 동적으로 전환할 수 있습니다. v-bind:class 지시문은 일반 클래스 속성과 공존할 수 있습니다.

<div class="static" v-bind:class="{ &#39;class-a&#39;: isA, &#39;class-b&#39;: isB }"></div>
 
data: {
 isA: true,
 isB: false
}

는 다음과 같이 렌더링됩니다.

isA와 isB가 변경되면 그에 따라 클래스 목록이 업데이트됩니다. 예를 들어 isB가 true가 되면 클래스 목록은 "static class-a class-b"가 됩니다.

데이터의 개체를 직접 바인딩할 수도 있습니다.

<div v-bind:class="classObject"></div>
 
data: {
 classObject: {
 &#39;class-a&#39;: true,
 &#39;class-b&#39;: false
 }
}

여기에서 반환된 개체의 계산된 속성을 바인딩할 수도 있습니다. 이는 일반적으로 사용되는 강력한 패턴입니다.

배열 구문

v-bind:class에 배열을 전달하여 클래스 목록을 적용할 수 있습니다.

<div v-bind:class="[classA, classB]">
 
data: {
 classA: &#39;class-a&#39;,
 classB: &#39;class-b&#39;
}

다음으로 렌더링됨 ：

또한 조건에 따라 목록의 클래스를 전환하려는 경우 삼항식을 사용할 수 있습니다. 수식:

<div v-bind:style="{ color: activeColor, fontSize: fontSize + &#39;px&#39; }"></div>
 
data: {
 activeColor: &#39;red&#39;,
 fontSize: 30
}

<div v-bind:style="styleObject"></div>
 
data: {
 styleObject: {
 color: &#39;red&#39;,
 fontSize: &#39;13px&#39;
 }
}