VUE 스타일에서 데이터의 변수를 사용하는 방법

최근 프로젝트의 공공 구성 요소는 재사용할 때 서로 다른 장면에 대해 CSS에서 스타일의 값을 끊임없이 변경해야 하며 이미 전역적인 공공 구성 요소 스타일이 있다
만약에 vue의 전통적인 동적 귀속class와style 방식으로 스타일을 수정하려면 (문장에서 언급할 것입니다) 많은 변수와 모듈class를 추가로 써야 합니다. 만약에 제 스타일의 값이 부모 구성 요소에서 하위 구성 요소로 전달될 수 있다면 하위 구성 요소는 전송된 값에 따라 대응하는 스타일의 값을 렌더링할 수 있습니다. 사실은 스타일에서 데이터와props의 변수를 사용하려면 어떻게 해야 합니까?
사실은 매우 간단하다. 단지 세 걸음만 있으면 모두가 볼 수 있다.
1, HTML 구조

<Upload

   ref="upload"

   :show-upload-list="false"

   :before-upload="handleBeforeUpload"

   :disabled="disabled"

   :max-size="maxSize"

   action
>

2. 역할 영역 범위 내에서 "CSS 변수"설정

<style lang="less" scoped>
.info-img-wrap {

 --textAlignPosition: center;

 /deep/ .ivu-upload {

  text-align: var(--textAlignPosition);

 }

}
<style/>

3. JS에서 setProperty() 방법으로 "--textAlignPosition"값을 수정하여 하위 요소에 대한 (text-align) 텍스트 정렬을 간접적으로 변경합니다

mounted() {

   this.$nextTick(function () {

    this.$refs.upload.$el.style.setProperty(

     '--textAlignPosition',

     this.textAlign

    );

   });

}

이게 완성이야.
다음은 vue에서 스타일을 수정하는 또 다른 두 가지 방법을 복습합니다. 하나는 동적 수정class이고, 다른 하나는 동적 수정style입니다.
1. vue에서 대상 문법과 그룹 문법을 통해class를 수정할 수 있다
대상 문법
html

<div v-bind:class="{ 'active': isActive, 'text-danger': hasError }"></div>

js

data: {

 isActive: false,

 hasError: true

}

수조 문법
html

<div v-bind:class="\[isActive ? activeClass : '', errorClass\]"></div>

js

data: {

 isActive: false,

 hasError: true,

 activeClass: 'active',

 errorClass: 'text-danger'
}

isActive와hasError의 값을 동적으로 바꾸기만 하면 div의 연결이 다른class와 연결을 제거할 수 있습니다
2. vue에서 대상 문법과 그룹 문법을 통해 스타일을 수정할 수 있다
대상 문법
html

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

js

data: {

 activeColor: 'red',

 fontSize: 30

}

수조 문법
html

<div v-bind:style="\[styleColor, styleSize\]"></div>

js

data: {

 styleColor: {

   color: 'red'

  },

 styleSize:{

   fontSize:'23px'

 }

}

데이터의 변수 styleColor와 styleSize만 바꾸면 div의 스타일을 동적으로 수정할 수 있습니다.
VUE style에서 데이터에 있는 변수를 사용하는 방법에 관한 이 글은 여기에 소개되었습니다. 더 많은 관련 VUE style에서 데이터 변수를 사용하는 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보시기 바랍니다. 앞으로 많은 응원 부탁드립니다!