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

 >  기사  >  웹 프론트엔드  >  Vue에 CSS를 동적으로 추가하는 방법

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

醉折花枝作酒筹
醉折花枝作酒筹원래의
2021-07-26 11:55:2212729검색

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: &#39;&#39;, // 弹框的高度
    addInviteHeight2: &#39;&#39;, // 弹框的高度
    lightBlue: &#39;lightBlue&#39;,  // lightBlue是css中定义的样式名
}

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

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

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

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.