Vuetify 元素上的条件颜色参数

Question

我正在使用 vuetify，它带有内置的颜色参数和一些预定义的颜色。我正在动态地将数据加载到组件，并且我希望组件的颜色取决于数据值，例如。complete: true, then color = green

我正在尝试做的事情的例子

<component :color="'deep-purple accent-4' if item.complete else 'grey'" v-for="n in items"></component>

上面的示例是粗糙的且不合法的代码，但我认为突出了我想要做的事情。我知道我可以创建自己的类并使用条件类方法，但如果可能的话我想坚持使用内置的 Vuetify 内容

Answer 1

除了使用您在答案中已经发布的方法之外，您还可以使用三元运算符内联执行此操作。

<component :color="n.complete ? 'green' : 'grey'" v-for="n in items"></component>