vue2.0 根據(jù)狀態(tài)值進(jìn)行樣式的改變展示方法
更新時間：2018年03月13日 15:11:26 作者：yyjourney
下面小編就為大家分享一篇vue2.0 根據(jù)狀態(tài)值進(jìn)行樣式的改變展示方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
用戶在進(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賦值，就可以實現(xiàn)不同狀態(tài)下，顯示不同的背景色。
以上這篇vue2.0 根據(jù)狀態(tài)值進(jìn)行樣式的改變展示方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue-resource + json-server模擬數(shù)據(jù)的方法
本篇文章主要介紹了vue-resource + json-server模擬數(shù)據(jù)的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
關(guān)于json-bigint處理大數(shù)字問題
這篇文章主要介紹了關(guān)于json-bigint處理大數(shù)字問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
關(guān)于Element-UI Table 表格指定列添加點擊事件
這篇文章主要介紹了關(guān)于Element-UI Table 表格指定列添加點擊事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue3實現(xiàn)封裝時間計算-日期倒計時組件-還有XX天&第XX天
這篇文章主要介紹了vue3實現(xiàn)封裝時間計算-日期倒計時組件-還有XX天&第XX天,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了通過vue實現(xiàn)網(wǎng)頁截圖的功能，有興趣的童鞋可以了解一下2021-11-11
vue.js+ElementUI實現(xiàn)進(jìn)度條提示密碼強(qiáng)度效果
這篇文章主要介紹了vue.js+ElementUI實現(xiàn)進(jìn)度條提示密碼強(qiáng)度效果,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01
淺析Vue.js中v-bind v-model的使用和區(qū)別
v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定,所謂雙向綁定。這篇文章主要介紹了Vue.js中v-bind v-model的使用和區(qū)別,需要的朋友可以參考下2018-12-12
Vue中使用 setTimeout() setInterval()函數(shù)的問題
這篇文章主要介紹了Vue中使用 setTimeout() setInterval()函數(shù)的問題 ,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了Vue?github用戶搜索案例分享，文章基于Vue的相關(guān)資料展開對主題的詳細(xì)介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-04-04
這篇文章主要介紹了Vue請求后端接口導(dǎo)出excel表格方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04