In vue: 클래스 사용법

Vue의 :class 속성은 요소의 CSS 클래스를 동적으로 설정하는 데 사용됩니다. 조건에 따라 클래스, 바인딩된 클래스 배열 또는 객체를 추가하거나 제거할 수 있습니다. CSS 클래스 이름이 포함된 객체, 배열 또는 문자열을 값으로 허용하고, 클래스 속성이 있는 요소에만 적용할 수 있으며, 기존 클래스를 재정의하지 않습니다.

Vue에서 :class 사용

:class 속성

:class는 요소의 CSS 클래스를 동적으로 설정할 수 있는 Vue의 속성입니다. CSS 클래스 이름을 값으로 포함하는 객체, 배열 또는 문자열을 허용합니다.

Syntax

<code>:class="['class1', 'class2', { 'class3': true }]"</code>

Purpose

: 클래스 속성은 주로 데이터를 기반으로 CSS 클래스를 동적으로 추가하거나 제거하는 데 사용됩니다. 다음 기능을 구현할 수 있습니다.

• 조건에 따라 클래스 추가 또는 제거: :class="{ 'active': isVisible }":class="{ 'active': isVisible }"
• 根据数据值添加类：:class="['class-' + propValue]"
• 绑定类数组：:class="classArray"
• 绑定类对象：:class="{ 'class1': true, 'class2': false }"

示例

<code class="html"><div :class="{ 'active': isVisible, 'error': hasError }"></div></code>

上面的示例将根据 isVisible 和 hasError 的值动态地添加或移除 active 和 error 类。

<code class="html"><div :class="classArray"></div></code>

上面的示例将绑定一个类数组，该数组包含要添加到元素的类名称。

注意事项

• :class 属性只能应用于带有 class
데이터 값에 따라 클래스 추가: : class= "['class-' + propValue]"
• Bind 클래스 배열: :class="classArray"
• Bind 클래스 객체: :class="{ ' class1': true, 'class2': false }"

🎜🎜🎜Example🎜🎜rrreee🎜위의 예는 isVisible 및 값을 기반으로 동적입니다. hasError active 및 error 클래스를 독립적으로 추가하거나 제거합니다. 🎜rrreee🎜위의 예에서는 요소에 추가할 클래스 이름이 포함된 클래스 배열을 바인딩합니다. 🎜🎜🎜Notes🎜🎜🎜🎜: class 속성은 class 속성이 있는 요소에만 적용할 수 있습니다. 🎜🎜:class 속성은 요소의 기존 클래스를 재정의하지 않지만 기존 클래스에 추가합니다. 🎜🎜값이 부울인 경우 클래스 이름을 키로 하여 클래스 객체에 해당 값이 설정됩니다. 🎜🎜

위 내용은 In vue: 클래스 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!