VUE 스타일로 데이터에 변수를 사용하는 방법에 대한 자세한 설명

최근 프로젝트에서 공용 구성 요소를 재사용할 때 CSS의 스타일 값은 다양한 시나리오에 따라 지속적으로 변경되어야 하며 이미 전역 공용 구성 요소 스타일이 있습니다

Vue의 기존 동적 바인딩을 사용하는 경우 스타일을 수정하려면 클래스와 스타일을 정의함으로써(문서 끝 부분에 언급됨) 추가 변수와 모듈 클래스를 많이 작성해야 합니다. 그런 다음 내 스타일의 값이 상위 구성 요소에서 하위 구성 요소로 전달될 수 있다면 하위 구성 요소는 다음과 같습니다. 전달된 값에 따라 수정됩니다. 해당 스타일의 값을 렌더링한다는 것은 실제로 스타일의 데이터 및 소품에 있는 변수를 사용하는 것을 의미합니다.

관련 학습 권장 사항: javascript 비디오 튜토리얼

실제로는 매우 간단합니다. 세 단계만 거치면 됩니다. 살펴보겠습니다.

1 HTML 구조

<Upload

   ref="upload"

   :show-upload-list="false"

   :before-upload="handleBeforeUpload"

   :disabled="disabled"

   :max-size="maxSize"

   action
>

2. Variable"

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

 --textAlignPosition: center;

 /deep/ .ivu-upload {

  text-align: var(--textAlignPosition);

 }

}
<style/>

3. JS의 setProperty() 메서드를 통해 "--textAlignPosition" 값을 수정하여 해당 하위 요소의 (텍스트 정렬) 텍스트 정렬을 간접적으로 변경합니다

mounted() {

   this.$nextTick(function () {

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

     '--textAlignPosition',

     this.textAlign

    );

   });

}

거의 완료되었습니다.

vue에서 스타일을 수정하는 두 가지 다른 방법을 검토해 보겠습니다. 1은 클래스를 동적으로 수정하는 것이고, 2는 스타일을 동적으로 수정하는 것입니다.

1 vue에서는 객체 구문과 배열 구문을 통해 클래스를 수정할 수 있습니다.

객체 구문

html

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

js

data: {

 isActive: false,

 hasError: true

}

Array 구문

html

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

js

data: {

 isActive: false,

 hasError: true,

 activeClass: 'active',

 errorClass: 'text-danger'
}

isActive 및 hasError 값을 동적으로 변경하기만 하면 되며, 다른 클래스를 바인딩하고 제거할 수 있습니다. p

바인딩 2. 객체 구문과 배열 구문을 통해 vue에서 스타일을 수정할 수 있습니다. styleColor 및 styleSize 변수를 변경하면 p의 스타일을 동적으로 수정할 수 있습니다.

관련 학습 권장 사항:

프로그래밍 비디오

위 내용은 VUE 스타일로 데이터에 변수를 사용하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!