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