今回は、ステータス値に基づいた vue2.0 スタイルの変更表示方法を共有します。これは、良い参考値になっているので、皆さんの参考になれば幸いです。
ユーザーがプロセス操作を実行するとき、それらは通常、進行中、未開始、および完了に分けられ、フロントエンド ページには対応するステータスの区別が表示される必要があります。ここでテストされるのは背景色の区別です。
デモ:
<span class="contract-span" :class="statusText[item.status][0]">{{statusText[item.status][1]}}</span>
statusText: { 0: ['span-delay', '进行中'], 1: ['span-finish', '已完成'], 2: ['span-rough', '未开始'], },//显示状态
ループトラバーサル中にステータス値を割り当てることにより、異なる状態で異なる背景色を表示できます。
上記は私があなたのためにまとめたものです。
関連記事:
vueで実装した画像をデータベースにアップロードしてページに表示する機能の例
以上がvue2.0はステータス値に応じてスタイルの表示方法を変更しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。