Html 如何根据数据更改标记的css？

我正在vuejs中构建spa，我想根据收到的数据更改文本的颜色，如果我获得挂起状态，则应为灰色，如果提交，则为绿色，如果拒绝，则为红色，依此类推

在您的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"
     }
   }
}

...

computed方法

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>

状态

---

如何使用v-model绑定p标记的值？

v-model

几乎只用于输入。如果您想将数据内容显示到p标记中，您可以使用一种称为mustache的格式来实现这一点：

{{status}}

是的，我正在使用的是，我的查询是如何不断更改status的值：'pending'等。您的具体意思是保持更改吗？例如，如果我有5个任务，那么状态是不同的。例如：a:已提交，b:待定，c:已拒绝