用戶在進行流程操作的時候，一般分為進行中，未開始，已完成，前端頁面就要進行相應的狀態區分展示。這里測試的是背景顏色區分。

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賦值，就可以實現不同狀態下，顯示不同的背景色。

以上這篇vue2.0 根據狀態值進行樣式的改變展示方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。