Javascript 带单花括号的Vue v-bind表达式

我只是在学习和试验Vue.js

通过遵循本教程，我遇到了一种情况，即在v-for循环中的当前元素的条件下，需要将类添加到span元素，为此，使用了一个带单花括号的表达式，如下所示：

 <p v-for="todo in todos" :key="todo">
    <span :class="{'is-completed' : todo.completed}">{{ todo.title }}</span>
 </p>

{{todo.title}}

todo.completed

是一个布尔值

有人能给我解释一下这个

{'is-completed'：todo.completed}

是怎么回事吗

这不是JavaScript中对象的语法吗？v-bind指令为什么以及如何工作

---

谢谢大家!

我想这只是一个简写，相当于一个计算属性返回这个对象，其中每个属性表示一个类名

{{todo.title}

计算：{
班班（）{
返回{
“已完成”：this.todo.completed
}
}
}

对于这些基本问题，我建议您阅读vues文档。它会给你比在这里提问更深刻的理解。单个花括号对表示这是一个JavaScript对象