Javascript 根据布尔变量设置两个类中的一个

我的待办事项清单如下：

        tasks : [
        { description: "make dinner", ID: false },
        { description: "make webpage", ID: true },
        { description: "walk", ID: false },
        { description: "watch tv", ID: true },
        { description: "study", ID: false },
        { description: "sleep", ID: true },
    ]

我想用绿色显示完成的部分，其他部分用红色显示。我正在学习vue.js，但不知道如何做到这一点。这是html：

var root=新的Vue({
el:“根”，
数据：{
任务：[
{description:“制作晚餐”，ID:false}，
{description:“制作网页”，ID:true}，
{description:“walk”，ID:false}，
{description:“看电视”，ID:true}，
{description:“study”，ID:false}，
{description:“sleep”，ID:true}，
]
}
})

正文{背景色：粉蓝}
.已完成{颜色：绿色；}
.notCompleted{颜色：红色；}

您可以这样定义类：

：类=”[
{
“已完成”：task.ID，
“未完成”：！task.ID
}
]"

或者：

:class="task.ID ? 'completed' : 'notCompleted'"

---

@塔普拉：好的，唐克斯，这起作用了。请注意，三元表达式应该在括号内，不需要括号。我确实注意到我的答案中缺少了一个撇号，虽然你是对的，但我在vue.js文档中读到了一个示例，其中他们使用了括号，但不管怎样，没有括号也行