如何根据数据更改标签的css？答案

【问题标题】：how to change css of a tag on the basis of data?如何根据数据更改标签的css？
【发布时间】：2017-09-09 11:22:13
【问题描述】：

我正在 vuejs 中构建一个水疗中心，我想根据收到的数据更改文本的颜色，如果我获得待处理状态，它应该是灰色的，如果提交则为绿色，如果被拒绝则为红色等等.

【问题讨论】：

【解决方案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

【讨论】：

如何使用 v-model 绑定 p 标签的值？
v-model 几乎只用于输入。如果你想将数据的内容显示到 p 标签中，你可以使用一种叫做 mustache 的格式：<p>{{ status }}<p>
是的，我正在使用我的查询是如何继续更改 status:'pending' 等的值
保持更改具体是什么意思？
就像我有 5 个任务然后状态不同。喜欢：a：已提交，b：待定，c：已拒绝