我是這樣寫的，因為我好多頁面都用到了，所以封裝到js檔案中了。這裡是根據不同的狀態顯示不同的圖片及文字顏色。 status.js檔案：

    import Vue from 'vue';
    import delete1 from '../img/delete1.png';
    import delete2 from '../img/delete2.png';
    import invalid1 from '../img/invalid.png';
    import invalid2 from '../img/invalid1.png';
    import effect1 from '../img/effect.png'
 
;
    import effect2 from '../img/effect1.png';
    let color =  (col) => {
        if(col == '待發布') {
            return 'rgb(178, 178, 178)';
        }
        if(col == '失效-待審批') {
            return 'rgb(227, 158, 0)';
        }
        if(col == '生效-待審批') {
            return 'rgb(227, 158, 0)';
        }
        if
 
(col == '已生效') {
            return '#289c01';
        }
        if(col == '失效-審批失敗') {
            return '#df3d3e';
        }
        if(col == '變更-待審批') {
            return 'rgb(227, 158, 0)';
        }
    }
    let srcDelete = (src) =>{
        if(src == '待發布' || src == '失效-審批失敗' || src == '已失效'
 
) {
            return delete1;
        } else {
            return delete2;
        }
    }
    let srcDeffect = (src) => {
        if(src == '已生效'){
            return invalid1;
        } else {
            return invalid2;
        }
    }
    let srcEffect = (src) => {
        if(src == '已失效' || src == '失效-審批失敗') {
            return effect1;
        } else {
            return effect2;
        }
    }
    let bgColor = (color) => {
        if(color == '待發布' || color == '失效-審批失敗' || color == '已失效') {
            return 'rgb(51, 51, 51)';
        } else {
            return 'rgb(178, 178, 178)';
        }
    }
    let bgColor1 = (color) => {
        if(color == '已生效'){
            return 'rgb(51, 51, 51)';
        } else {
            return 'rgb(178, 178, 178)';
        }
    }
    let bgColor2 = (color) => {
        if(color == '已失效' || color == '失效-審批失敗') {
            return 'rgb(51, 51, 51)';
        } else {
            return 'rgb(178, 178, 178)';
        }
    }
    export default {
        color,
        srcDelete,
        srcDeffect,
        srcEffect,
        bgColor,
        bgColor1,
        bgColor2
    }

html

<div class='title'>
    <p>服務程式碼： {{item.serveCode}}</p>
    <p>服務名稱： {{item.serveName}}</p>
    <p>{{item.serveTime}}</p>
    <ul>
        <li><img :src="srcDelete(item.status)"><span :style="{'color':bgColor(item.status)}">刪除</span></li>
        <li><img :src="srcDeffect(item.status)"><span :style="{'color':bgColor1(item.status)}">失效</span></li>
        <li><img :src="srcEffect(item.status)"><span :style="{'color':bgColor2(item.status)}">生效</span></li>
        <li><img src='../../static/img/edit1.png'><span class='change'>變更</span></li>
    </ul>
</div>
<div class='content'>
    <ul>
        <li>{{item.type}}</li>
        <li>{{item.object}}</li>
        <li><span v-for='item2 in item.period.split("—")'>{{item2}}</span></li>
        <li><span v-for='item1 in item.scope.split(" ")'>{{item1}}</span></li>
        <li>{{item.fusingCondition}}</li>
        <li>{{item.conditionThreshold}}</li>
        <li>{{item.retryCycle}}</li>
        <li>{{item.retryCount}}</li>
        <li><p>{{item.descript}}</p></li>
        <li><span :style="{'color':color(item.status)}">{{item.status}}</span><span class='liucehng'>流程跟蹤</span></li>
    </ul>
</div>

js部分：

 import status from '../../static/js/status.js'; 
 methods： {
            srcDelete(){
            },
            srcDeffect() {
            },
            srcEffect(){
            },
            bgColor(){
            },
            bgColor1(){
            },
            bgColor2(){
            },
            color(){
            },
        },
mounted () {
          this.getTable();
          // 圖片以及顏色的動態改變
          this.srcDelete = status.srcDelete;
          this.srcDeffect = status.srcDeffect;
          this.srcEffect = status.srcEffect;
          this.bgColor = status.bgColor;
          this.bgColor1 = status.bgColor1;
          this.bgColor2 = status.bgColor2;
          this.color = status.color;
}

效果：