用戶在進(jìn)行流程操作的時候，一般分為進(jìn)行中，未開始，已完成，前端頁面就要進(jìn)行相應(yīng)的狀態(tài)區(qū)分展示。這里測試的是背景顏色區(qū)分。

demo：

<span class="contract-span" :class="statusText[item.status][0]">{{statusText[item.status][1]}}</span>

   statusText: {    0: ['span-delay', '進(jìn)行中'],    1: ['span-finish', '已完成'],    2: ['span-rough', '未開始'],   },//顯示狀態(tài)

在循環(huán)遍歷中進(jìn)行對status賦值，就可以實(shí)現(xiàn)不同狀態(tài)下，顯示不同的背景色。

以上這篇vue2.0 根據(jù)狀態(tài)值進(jìn)行樣式的改變展示方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持武林網(wǎng)。