Vue v-bind:class中使用单花括号对象表达式的原理是什么？

你写在:class后的{'is-completed' : todo.completed}是标准JavaScript对象字面量语法，在class绑定场景下遵循固定规则：

• 对象的键名是需要动态绑定的CSS类名字符串
• 对象的值是布尔判断条件：值为true时，对应键名的类名会被添加到元素上；值为false时，该类名不会生效

对应到你写的todo列表场景：

• 当当前遍历项的todo.completed为真时，span元素会绑定is-completed类
• 当todo.completed为假时，span元素不会携带is-completed类

举个实际渲染对照：若某条todo的completed为true、title为“完成Vue练习”，最终生成的DOM为：

<span class="is-completed">完成Vue练习</span>

若completed为false，则渲染为：

<span class="">完成Vue练习</span>

首先需要明确：v-bind指令的等号后跟随的内容，本质是一段可执行的JavaScript表达式，而非静态文本插值。Vue会对这段表达式做求值执行，拿到返回值后再做后续处理。

Vue并不会对所有绑定的返回值做特殊处理：比如绑定普通属性时写:id="{active: true}"，对象求值后会被直接序列化为[object Object]赋值给id属性，完全不具备实用性。但Vue对:class和:style这两个高频使用的绑定，专门做了语法适配，支持传入对象、数组格式的值来批量管理动态样式，这也是对象语法能在class绑定中正常生效的核心原因。

整个动态类绑定的执行链路可以拆为4个步骤：

1. 表达式求值：Vue会把你写在:class里的对象表达式当成普通JS代码执行，拿到对应的对象结果，不会直接把对象转成字符串塞给DOM的class属性。
2. 类名筛选：Vue会遍历返回对象的每一组键值对，把值为真值的键名收集起来，作为当前需要生效的动态类名列表，值为假值的类名直接跳过。
3. 类名合并：Vue会把收集到的动态类名，和元素原生静态class上写的固定类名做合并，将最终拼接完成的类名字符串设置到DOM元素的class属性上。
4. 响应式更新：当todo.completed这类依赖的响应式数据发生变化时，Vue会重新执行绑定表达式、重新计算需要的类名列表，和元素当前已有的类名做精准diff，只更新发生变化的部分，不会全量重写类名导致原有样式状态丢失。

内容的提问来源于stack exchange，提问作者Aroldo Silva