根据数据值改变Vue元素样式答案

【问题标题】：Change Vue element style according to data value根据数据值改变Vue元素样式
【发布时间】：2021-03-19 21:56:27
【问题描述】：

在我的 HTML 页面中，我有一个表格，其中列出了有关购买申请的信息，并且有一个状态列。我想根据状态的值来改变文字的颜色。

例如，如果购买申请已通过验证，我希望“已验证”为绿色。但是如果购买申请被拒绝，我希望“已拒绝”为红色。

我的html代码：

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="./index.css">
  </head>
  <body>
      <table>
          <tr>
            <th>Demande n°</th>
            <th>Etat</th>
            <th>N° Commande</th>
          </tr>
          <tr v-for="demande in demandes">
            <td>{{demande.numDemande}}</td>
            <td v-bind:style="{ color: activeColor}">{{demande.etatDemande}}</td>
            <td>{{demande.numCommande}}</td>            
          </tr>
        </table>
    </div>
    <script type="text/javascript" src="/Achats/vue.js"></script>
    <script type="text/javascript" src="/Achats/vue-resource.min.js"></script>
    <script type="text/javascript" src="index.js"></script>
  </body>
</html>

我的js代码：

window.onload = function () {
  var consultationAchats = new Vue({
    el: "#body",
    data: {
      demandes: [],
      activeColor: 'orange'
    },
    methods: {
      getDemandes: function() {
        this.$http.get("/getDemandes").then(function(response) {
          if (response.body) {
            consultationAchats.demandes = response.body;
          }
        })
      },
      styleEtat: function(etat) {
        if (etat == "En attente de traitement") {
          this.activeColor = 'orange';
        } else if (etat == "En cours de traitement") {
          this.activeColor = 'orange';
        } else if (etat == "Refusé") {
          this.activeColor = 'red';
        } else if (etat === "Validée") {
          this.activeColor = 'green';
        }
      }
    },
    created: function() {
      this.getDemandes();
    }
  })

我尝试使用v-bind:style 并将颜色定义到变量activeColor 中，该变量将在函数styleEtat 中更改。但我意识到我不知道如何或在哪里可以使用该功能。

【问题讨论】：

标签： javascript html css vue.js vuejs2

【解决方案1】：

使用样式对象避免使用模板中的方法：

data: {
    demandes: [],
    etatColors: {
      "En attente de traitement": "orange",
      "En cours de traitement": "orange",
      "Refusé": "red",
      "Validée": "green"
    }
},

像这样使用它：

<td v-bind:style="{ color: etatColors[demande.etatDemande] }"> 
   {{ demande.etatDemande }}
</td>

这是一个演示：

new Vue({
  el: '#app',
  data() {
    return {
      demandes: [
        { etatDemande: "En attente de traitement" },
        { etatDemande: "En cours de traitement" },
        { etatDemande: "Refusé" },
        { etatDemande: "Validée" },
      ],
      etatColors: {
        "En attente de traitement": "orange",
        "En cours de traitement": "orange",
        "Refusé": "red",
        "Validée": "green"
      }
    }
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table>
    <tr v-for="demande in demandes">
      <td :style="{ color: etatColors[demande.etatDemande] }">
        {{ demande.etatDemande }}
      </td>
    </tr>
  </table>
</div>

【讨论】：