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>

如何将样式从计算机传递到模板

1 个答案: