Question

我是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芯片中设置。

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

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

由于某种原因，无法设置颜色。

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

Answer 1

您可以直接将the :class binding与vue中的数据道具一起使用；也可以将其与常规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

Answer 2

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

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

Answer 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>

Answer 4

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

$ celery --app=my_proj worker --queues=my_cron --concurrency=10 --pool=gevent --loglevel=INFO
[2021-08-06 06:21:34,936: INFO/MainProcess] Task task.booking.completed_bookings[b8165359-778e-42f8-98fe-c8cde56eca8c] received
[2021-08-06 06:21:34,945: WARNING/MainProcess] 2021-08-06 06:21:34.938737+00:00 Found completed bookings: <QuerySet [{'contact_name': 'Goku', 'status': 'Completed'}, {'contact_name': 'Majin Buu', 'status': 'Completed'}]>
[2021-08-06 06:21:34,945: WARNING/MainProcess] 

[2021-08-06 06:21:34,945: INFO/MainProcess] Task task.booking.completed_bookings[b8165359-778e-42f8-98fe-c8cde56eca8c] succeeded in 0.007730239000011352s: None
[2021-08-06 06:22:00,005: INFO/MainProcess] Task task.booking.completed_bookings[aa8204aa-8253-4fc5-bfe5-5814ba362fc9] received
[2021-08-06 06:22:00,011: WARNING/MainProcess] 2021-08-06 06:22:00.008650+00:00 Found completed bookings: <QuerySet [{'contact_name': 'Goku', 'status': 'Completed'}, {'contact_name': 'Majin Buu', 'status': 'Completed'}]>
[2021-08-06 06:22:00,011: WARNING/MainProcess] 

[2021-08-06 06:22:00,012: INFO/MainProcess] Task task.booking.completed_bookings[aa8204aa-8253-4fc5-bfe5-5814ba362fc9] succeeded in 0.004510529000071983s: None
[2021-08-06 06:23:00,054: INFO/MainProcess] Task task.booking.completed_bookings[7da463b2-4fd8-427f-b6aa-c32ea0cdfdef] received
[2021-08-06 06:23:00,062: WARNING/MainProcess] 2021-08-06 06:23:00.058649+00:00 Found completed bookings: <QuerySet [{'contact_name': 'Goku', 'status': 'Completed'}, {'contact_name': 'Majin Buu', 'status': 'Completed'}]>
[2021-08-06 06:23:00,062: WARNING/MainProcess] 

[2021-08-06 06:23:00,063: INFO/MainProcess] Task task.booking.completed_bookings[7da463b2-4fd8-427f-b6aa-c32ea0cdfdef] succeeded in 0.005619957999442704s: None
[2021-08-06 06:24:00,047: INFO/MainProcess] Task task.booking.completed_bookings[253930f2-7b36-4ef6-9369-e100499eb77d] received
[2021-08-06 06:24:00,058: WARNING/MainProcess] 2021-08-06 06:24:00.052540+00:00 Found completed bookings: <QuerySet [{'contact_name': 'Goku', 'status': 'Completed'}, {'contact_name': 'Majin Buu', 'status': 'Completed'}]>
[2021-08-06 06:24:00,058: WARNING/MainProcess] 

[2021-08-06 06:24:00,059: INFO/MainProcess] Task task.booking.completed_bookings[253930f2-7b36-4ef6-9369-e100499eb77d] succeeded in 0.00852864300031797s: None

动态更改vuetify v-chip颜色

4 个答案: