javascript - Vuetify 元素上的条件颜色参数

Question

我正在使用 vuetify，它带有一个内置的颜色参数和一些预定义的颜色。我正在动态地将数据加载到组件，我希望组件的颜色取决于数据值，例如。 完成:true，然后 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>