vue.js 입문 튜토리얼 바인딩 클래스 및 스타일 스타일

1. 서문

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

2. HTML 클래스 바인딩

참고: Mustache 태그를 사용하여 class="{{ className }}"와 같은 클래스를 바인딩할 수 있지만 권장되지 않습니다. 쓰기 방식은 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
}

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

<div class="static class-a"></div>

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

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

<div v-bind:class="classObject"></div>

data: {
 classObject: {
 'class-a': true,
 'class-b': false
 }
}

배열 구문

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

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

<div v-bind:class="[classA, classB]">

data: {
 classA: 'class-a',
 classB: 'class-b'
}

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

<div class="class-a class-b"></div>

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

<div v-bind:class="[classA, isB ? classB : &#39;&#39;]">

2. 인라인 스타일 바인딩

객체 구문

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

일반적으로 스타일 객체에 직접 바인딩하는 것이 더 좋습니다. 템플릿을 더 명확하게 만드세요.

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

data: {
 activeColor: 'red',
 fontSize: 30
}

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

<div v-bind:style="styleObject"></div>

data: {
 styleObject: {
 color: 'red',
 fontSize: '13px'
 }
}

3. 배열 구문

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

자동으로 접두사 추가

<div v-bind:style="[styleObjectA, styleObjectB]">

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

4. 요약

위 내용은 vue.js 바인딩 클래스와 스타일 스타일에 대한 내용을 모두 자세하게 소개한 내용이며, 참고할 만한 가치가 있기를 바랍니다. vue.js를 배우는 것이 도움이 될 것입니다. 편집자는 vue.js에 대한 정보를 계속 업데이트할 것입니다. 관심 있는 친구는 계속해서 PHP 중국어 웹사이트에 관심을 가져주세요.

바인딩 클래스 및 스타일에 대한 vue.js 입문 튜토리얼과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!