我是新来的 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
由于某种原因,没有颜色设置。
有人可以提供一些建议吗?
您可以将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
只需使用像这样的 tenary 运算符
<v-chip
label
outlined
pill
:color="project.status==='complete'?'green':project.status==='ongoing'?'blue':'orange'"
>
{{project.status}}</v-chip>
您可以给您的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>
您可以使用“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>
本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处
评论列表(79条)