vue2.0 根據狀態值進行樣式的改變展示方法

下面我就為大家分享一篇vue2.0 根據狀態值進行樣式的改變展示方法，具有很好的參考價值，希望對大家有所幫助。

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

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

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

vue實作的上傳圖片到資料庫並顯示到頁面功能範例

##解決使用vue. js路由後失效的問題

js中如何完美的解析資料

以上是vue2.0 根據狀態值進行樣式的改變展示方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！