vue2.0はステータス値に応じてスタイルの表示方法を変更します

今回は、ステータス値に基づいた 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で実装した画像をデータベースにアップロードしてページに表示する機能の例

vue.jsルーティング使用後に失敗する問題を解決する

やり方js のデータを完全に解析します

以上がvue2.0はステータス値に応じてスタイルの表示方法を変更しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。