Chip whisperer:动态更改vuetifyv-chip颜色

关于Chip whisperer的问题,在v-chip vuetify中经常遇到, 我是新来的 vuejs 和 vuetify。

我是新来的 vuejs 和 vuetify。

我正在跟随 YouTube 上的 vuetify 课程,他以以下方式设置了 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

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

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

4

您可以将the :class binding直接与 vue 中的数据 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.googlea.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

1

只需使用像这样的 tenary 运算符

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

您可以给您的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>
0

您可以使用“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>

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(191)
草莓cp:同时使用 ActivePerl和草莓
上一篇
Ccat拉丁舞考级证书查询:猪拉丁语查询总和和计数(latin count)
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(79条)