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}}”
    在這裏插入圖片描述
發佈了142 篇原創文章 · 獲贊 78 · 訪問量 15萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章