动态更改 vuetify v-chip 颜色答案

【问题标题】：Change vuetify v-chip color dynamically动态更改 vuetify v-chip 颜色
【发布时间】：2020-07-05 04:33:35
【问题描述】：

我是 vuejs 和 vuetify 的新手。

我正在关注关于 vuetify 的 youtube 课程，他通过以下方式设置了 v-chip 颜色。

<v-flex xs2 sm4 md2>
            <div class="right">
              <v-chip
                small
                :class="`${project.status} white--text my-2 caption`"
              >{{ project.status }}</v-chip>
            </div>
          </v-flex>

风格是；

.v-chip.complete {
  background: #3cd1c2;
}
.v-chip.ongoing {
  background: #ffaa2c;
}
.v-chip.overdue {
  background: #f83e70;
}

我可以看到项目状态文本设置正确。由于某种原因，颜色没有在 v-chip 中设置。

当我检查对象时，我发现它具有以下样式集

v-chip v-chip--no-color theme--light v-size--small ongoing white--text my-2 caption

由于某种原因，没有设置颜色。

有人可以提供一些建议吗？

【问题讨论】：

标签： vue.js colors vuetify.js

【解决方案1】：

你可以在vue中直接使用the :class binding和data prop；它也可以与常规的class 属性结合使用。

var app = new Vue({
  el: '#app',
  data: {
    projects: [{
      status: 'ongoing'
    }, {
      status: 'complete'
    }, {
      status: 'overdue'
    }]
  }
})

#chips-container .v-chip.complete {
  background: #3cd1c2;
}
#chips-container .v-chip.ongoing {
  background: #ffaa2c;
}
#chips-container .v-chip.overdue {
  background: #f83e70;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">

  <v-flex xs2 sm4 md2>
    <div class="right" id="chips-container">
      <v-chip v-for="project in projects" small :class="project.status" class="white--text my-2 caption">{{ project.status }}</v-chip>
    </div>
  </v-flex>

</div>

编辑：更新截图以使用 vuetify

【讨论】：

感谢您的回答。您正在使用状态作为颜色的名称（红色）。我的项目状态有“正在进行”之类的文字。如果状态正在进行，我想将芯片设置为绿色。我想使用的是链接将 v-chip 的颜色设置为绿色的正在进行的样式。知道怎么做吗？
@Janaka 已经更新了答案，vuetify 似乎在他们的类上有很多特殊性，所以建议在父容器上有一个 id 以使其更容易。

【解决方案2】：

像这样简单地使用三元运算符

 <v-chip
   label
   outlined
   pill                              
   :color="project.status==='complete'?'green':project.status==='ongoing'?'blue':'orange'"
 >
  {{project.status}}</v-chip>

【讨论】：

【解决方案3】：

你可以给你的v-chip一个id。

<v-chip id="chip" small :class="`${project.status} white--text caption my-2`">{{project.status}}</v-chip>


<style>
#chip.v-chip.complete {background: #00cc00;}
#chip.v-chip.ongoing{background: #0099ff;}
#chip.v-chip.overdue {background: #ff0000;}
</style>

【讨论】：

请详细说明。

【解决方案4】：

您可以使用“active-class”，api documentation

<v-flex xs2 sm4 md2>
 <div class="right">
  <v-chip small active-class="white--text my-2 caption">{{project.status}}</v-chip>
  </div>
 </v-flex>

【讨论】：