VUE 스타일에서 데이터의 변수를 사용하는 방법
만약에 vue의 전통적인 동적 귀속class와style 방식으로 스타일을 수정하려면 (문장에서 언급할 것입니다) 많은 변수와 모듈class를 추가로 써야 합니다. 만약에 제 스타일의 값이 부모 구성 요소에서 하위 구성 요소로 전달될 수 있다면 하위 구성 요소는 전송된 값에 따라 대응하는 스타일의 값을 렌더링할 수 있습니다. 사실은 스타일에서 데이터와props의 변수를 사용하려면 어떻게 해야 합니까?
사실은 매우 간단하다. 단지 세 걸음만 있으면 모두가 볼 수 있다.
1, HTML 구조
<Upload
ref="upload"
:show-upload-list="false"
:before-upload="handleBeforeUpload"
:disabled="disabled"
:max-size="maxSize"
action
>
<style lang="less" scoped>
.info-img-wrap {
--textAlignPosition: center;
/deep/ .ivu-upload {
text-align: var(--textAlignPosition);
}
}
<style/>
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>
data: {
isActive: false,
hasError: true
}
html
<div v-bind:class="\[isActive ? activeClass : '', errorClass\]"></div>
data: {
isActive: false,
hasError: true,
activeClass: 'active',
errorClass: 'text-danger'
}2. vue에서 대상 문법과 그룹 문법을 통해 스타일을 수정할 수 있다
대상 문법
html
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
html
<div v-bind:style="\[styleColor, styleSize\]"></div>
data: {
styleColor: {
color: 'red'
},
styleSize:{
fontSize:'23px'
}
}
VUE style에서 데이터에 있는 변수를 사용하는 방법에 관한 이 글은 여기에 소개되었습니다. 더 많은 관련 VUE style에서 데이터 변수를 사용하는 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보시기 바랍니다. 앞으로 많은 응원 부탁드립니다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
VUE 기반 장치가 PC인지 모바일 포트인지 판단실제 개발 과정에서 자주 발생하는 수요는 현재 웹 페이지에 로그인한 장치가 PC인지 이동인지를 판단하고 PC 측과 모바일 측이 서로 다른 웹 내용을 표시하도록 요구하는 것이다. 그러면 현재 로그인 장치에 대한 판단이...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
