uniapp에서 동적 스타일을 설정하는 방법

uniapp에서 동적 스타일을 설정하는 방법: 1. 사용자가 버튼을 클릭하면 버튼이 동적으로 전환되어 스타일을 선택합니다. 2. 라벨에 여러 색상을 렌더링합니다. 코드는 [.signstyle-0{color: # 3ac9e3;테두리: 1px 솔리드 #3ac9e3 }].

이 튜토리얼의 운영 환경: windows7 시스템, uni-app2.5.1 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

권장(무료): uni-app 개발 튜토리얼

uniapp에서 동적 스타일을 설정하는 방법:

시나리오 1: 사용자가 버튼을 클릭하고 버튼이 선택한 스타일을 동적으로 전환합니다( 그림과 같이)

<view class="state-btn-content">
    <view @tap="selectState" data-state="over" :class="[whichSelected==&#39;over&#39;?&#39;state-btn-selected&#39;:&#39;state-btn-noselect&#39;]">已上线</view>
    <view @tap="selectState" data-state="pre" :class="[whichSelected==&#39;pre&#39;?&#39;state-btn-selected&#39;:&#39;state-btn-noselect&#39;]">未开始</view>
</view>
//选择状态
selectState(e){
    this.whichSelected=e.currentTarget.dataset.state
}
.state-btn-content{
    //write your style
    .state-btn-selected{ ... }
    .state-btn-noselect{ ... }
}

참고: 하나의 태그에서 정적 클래스와 동적 클래스를 동시에 사용하지 않도록 주의하는 것이 중요합니다. 호환성 문제가 발생할 수 있기 때문입니다. 위 코드에서 스타일을 동적으로 변경하려면 다음 메소드만 사용하는 것이 가장 좋습니다. class

오류 예: d3e39d69d2bea08df6ac11b8dab3feceOnlinede5f4c1163741e920c998275338d29b2

시나리오 2: 레이블에 여러 색상 렌더링 (예: 사진)

<view :class="[&#39;every-sign-item&#39;,`signstyle-${index%6}`]" v-for="(item,index) in preSignList" :key="index">{{item.name}}</view>
.every-sign-item{
padding: 4rpx 16rpx;
border-radius: 24rpx;
font-size: 24rpx;
margin-right: 20rpx;
margin-bottom: 20rpx;
}
.signstyle-0{
color: #3ac9e3;
border: 1px solid #3ac9e3;
}
.signstyle-1{
color: #fd8888;
border: 1px solid #fd8888;
}
.signstyle-2{ ... }
.signstyle-3{ ... }
.signstyle-4{ ... }
.signstyle-5{ ... }

위 내용은 uniapp에서 동적 스타일을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!