Question

我正在vuejs建立一个水疗中心，我希望根据我收到的数据更改我的文本的颜色，如果我得到待处理状态它应该是灰色的，如果提交然后是绿色，如果被拒绝那么红色等等。

Answer 1

在你的Vue组合中，你可以拥有像这样的状态的数据和计算方法。

...

data() {
  return {
    // This status can be "rejected", "pending" and "submitted" for example.
    // Change the value of this in order to change the color.
    status: "pending"
  }
},

computed: {
   statusColor() {
     return {
       "text-grey": this.status === "pending",
       "text-green": this.status === "submitted",
       "text-red": this.status === "rejected"
     }
   }
}

...

计算方法statusColor返回具有给定状态数据的类，因此您需要在css中定义每个类。

.text-grey {
  color: "grey";
}
.text-green {
  color: "green";
}
.text-red {
  color: "red";
}

在HTML中，您可以将数据（状态）绑定到:class以切换样式。

<div>
  <p v-bind:class="statusColor">Status</p>
</div>

https://jp.vuejs.org/v2/guide/class-and-style.html

如何根据数据更改标签的CSS？

1 个答案: