" 구문을 사용하여 요소에 동적 스타일을 바인딩합니다. 2. 데이터에 데이터 개체를 정의합니다. CSS에서."/> " 구문을 사용하여 요소에 동적 스타일을 바인딩합니다. 2. 데이터에 데이터 개체를 정의합니다. CSS에서.">
vue에 CSS를 동적으로 추가하는 방법은 다음과 같습니다. 1. "f7bd6308cef54b20a801ba0f636fe258" 구문을 사용하여 동적 스타일을 요소에 바인딩합니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!