1.19 業務需求

說來葉簡單，就是把文字變成相應的顏色
先來看代碼

數據部分

// 顯示院校狀態邏輯
  showSchoolStatus(value) {
    const status = {
      0: '待學生確認',
      10: '處理中',
      15: '已提交',
      20: '已駁回',
      25: '學生駁回',
      30: '已確認',
      [-10]: '已棄用',
    };

    return status[value] || '';
  }

邏輯部分

  <td>{{ vm.showSchoolStatus(item.status) }}</td>

需求是把 已駁回 和 學生駁回變成紅色
已確認 變成綠色

實現過程

將原數據添加color屬性

// 顯示院校狀態邏輯
  showSchoolStatus(value) {
    const status = {
      0: {
       txt:'待學生確認'
      },
      10: {
       txt: '處理中'
      },
      15: {
        txt: '已提交'
      },
      20: {
        txt:'已駁回',
        color:'red'
      },
      25: {
        txt:'學生駁回',
        color:'red'
      },
      30: {
        txt: '已確認',
        color: 'green'
      },
      [-10]: {
        txt: '已棄用'
      },
    };
    return status[value] || '';
  }

邏輯部分

<td style="color: {{vm.showSchoolStatus(item.status).color}} ">{{ vm.showSchoolStatus(item.status).txt}}</td>

總結：

1. 屬性：值形勢的數據，要想添加屬性： 值 採用對象的形勢
2. 原來的返回數據的寫法不變，應爲之前返回的單個的數據，現在返回的是一個對象，都是返回單個
3. 獲取數據的時候，這裏我有點眼界小，只是在item.status裏面獲取數據，首先，你都不知道item.status是什麼數據，就txt? 應該現將item.status打印出來，發現是對象的名，那取值的話，肯定是在對象外面取值，再說了 … 少見
4. 樣式的修改 最常見的就是style=“color:red”
   5.那現在就是style = “ color: {{vm.showSchoolStatus(item.status).color}}”