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
}

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

4a0820b0f8ccac8a74c1d5d12ef47aac16b28748ea4df4d9c2150843fecfba68

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;
}

다음으로 렌더링됨 ：

95d66a4b96383bd3e82abe8c8e40596f16b28748ea4df4d9c2150843fecfba68

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

19de9f32bc61168916c704eb219bf5b9

이 예에서는 항상 classA를 추가하지만 isB가 true인 경우에만 추가합니다. 클래스 B.

그런데 조건부 클래스가 여러 개인 경우 이렇게 작성하는 것은 약간 번거롭습니다. 1.0.19+에서는 배열 구문 내에서 객체 구문을 사용할 수 있습니다:

5e8eb295b79d324df5d621d3d0eaa446

바인드 인라인 스타일

객체 구문

v-bind:style의 객체 구문은 매우 직관적입니다. CSS와 매우 비슷해 보이지만 실제로는 JavaScript 객체입니다. CSS 속성 이름은 camelCase 또는 kebab-case로 명명할 수 있습니다.

<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;
 }
}

마찬가지로 객체 구문은 객체를 반환하는 계산된 속성과 함께 사용되는 경우가 많습니다.

배열 구문

v-bind:style의 배열 구문은 하나의 요소에 여러 스타일 개체를 적용할 수 있습니다.

565466c4c2eadce5aff3b05147207428

자동으로 접두사 추가

v-bind:style이 변환과 같이 공급업체 접두사가 필요한 CSS 속성을 사용하는 경우 Vue.js는 해당 접두사를 자동으로 감지하고 추가합니다. .

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 PHP 중국어 웹사이트를 구독하시기를 바랍니다.

Vue.js에서 매일 배워야 할 클래스와 스타일 바인딩에 관한 더 많은 글을 보시려면 PHP 중국어 홈페이지를 주목해주세요!