首頁 > web前端 > js教程 > vue2.0 根據狀態值進行樣式的改變展示方法

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

亚连
發布: 2018-05-30 15:33:16
原創
2816 人瀏覽過

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

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

demo:

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

   statusText: {
    0: [&#39;span-delay&#39;, &#39;进行中&#39;],
    1: [&#39;span-finish&#39;, &#39;已完成&#39;],
    2: [&#39;span-rough&#39;, &#39;未开始&#39;],
   },//显示状态
登入後複製

#在迴圈遍歷中進行對status賦值,就可以實現不同狀態下,顯示不同的背景色。

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

相關文章:

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

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

js中如何完美的解析資料

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板