Vue에 CSS를 동적으로 추가하는 방법

vue에 CSS를 동적으로 추가하는 방법은 다음과 같습니다. 1. "

" 구문을 사용하여 동적 스타일을 요소에 바인딩합니다. 2. 데이터 개체에 데이터를 정의합니다. 3. CSS에 스타일을 작성합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, Dell G3 컴퓨터.

1단계: 요소에 동적 스타일 바인딩

1. 단일 스타일 추가

<div class="addInvTitle" :class="lightBlue">

2. 여러 스타일 추가

<div id="addInvite" class="addInvite" :class="[addInviteHeight1, addInviteHeight2]">

2단계: 데이터에서 데이터 개체 정의

data: {
    addInviteHeight1: '', // 弹框的高度
    addInviteHeight2: '', // 弹框的高度
    lightBlue: 'lightBlue',  // lightBlue是css中定义的样式名
}

3단계: CSS 중국어 쓰기 스타일

.addInviteHeight1 {
height: 52.5rem;
}
.addInviteHeight1 {
height: 48rem;
}
.lightBlue {
background-color: #6e9dd3;
}

[추천 학습: javascript 고급 튜토리얼]

위 내용은 Vue에 CSS를 동적으로 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!