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>

Answer 2

我使用了一个方法来有条件地返回所需的值。

<component :color="color(n.complete)" v-for="n in items"></component>

然后创建了一个新的方法

color: function(complete) {
    if (complete) {
        return 'green'
    } else {
        return 'grey'
    }
}