uniappで動的スタイルを設定する方法

動的スタイルを設定するための Uniapp メソッド: 1. ユーザーがボタンをクリックすると、ボタンが動的に切り替わってスタイルを選択します; 2. ラベルに複数の色をレンダリングします。コードは [.signstyle-0{カラー: #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{ ... }
}

注:同じタグを同時に使用しないように注意することが重要です。静的クラスと動的クラスを使用すると、互換性の問題が発生する可能性があります。 1 つのメソッドだけを使用するのが最善です。上記のコードでは、スタイルを動的に変更するために、次のみを使用します: class

エラー例: オンライン

シナリオ 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 中国語 Web サイトの他の関連記事を参照してください。