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

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