vue2.0ステータス値によるスタイルの変更表示

1205 ワード

ユーザがプロセス操作を行う場合,一般に進行中,未開始,完了に分けられ,フロントエンドページは対応する状態区分展示を行う.ここでテストしたのは背景色の区別です.demo:
<span class="contract-span" :class="statusText[item.status][0]">{{statusText[item.status][1]}}span>
      statusText: {
        0: ['span-delay', ' '],
        1: ['span-finish', ' '],
        2: ['span-rough', ' '],
      },// 

ループループでstatusに値を割り当てると、異なる状態で異なる背景色を表示できます.