如何將樣式從計算機傳遞到模板

Question

我在計算方法中創建，該方法根據狀態改變顏色。 我認為它是正確的，但是我仍然看不到我的結果：/

模板：

.status_values
   span.color(:style="changeColorStatus")

vue.js

 computed: {
  changeColorStatus() {
    let status = this.loan.schedule;
    status.map(e => {
      console.log(e.delay);
      if (e.delay == 0) {
        return "background-color:green";
      }
      if (e.delay <= 5) {
      return "background-color: lightgreen";
      }
      if (e.delay > 5) {
        return "background-color: red ";
      }
      if (e.status == "" && e.delay == 0 && e.debt > 0) {
      return "background-color: lightgray ";
      }
    });
  }
  },

有可能我應該在方法中而不是在計算機中執行此操作？ 在console.log（e.delay）中，我看到了所有的deley編號，因此可以比較它們。 它看起來很簡單，但是不起作用。

Answer 1

您必須將Javascript對象傳遞給style屬性。

例如，應該返回{'background-color': 'green'}而不是返回"background-color:green" 。

在*.vue文件中，它看起來像這樣：

<template>
  <div id="app" :style="styleApp">
    Hello
  </div>
</template>

<script>

export default {
  name: "App",
  computed: {
    styleApp: function () {
      return {
        'background-color': 'green'
      }
    }
  }
};
</script>