Bind HTML Classes (API v62.0+)

大家好，今天我们来聊一个非常实用的小更新——类对象绑定，从 API 版本 62.0 开始支持。别被名字吓到，简单说，就是你在 JavaScript 里动态拼接 CSS 类名的时候，现在写起来更省心，结果也更干净了。 想象一下，你有一个组件，要根据状态切换样式，以前我们可能传一个数组或者对象给 class 属性。在旧版本里，如果你传数组，它会把所有东西都用逗号连起来，比如 `['btn', isActive && 'active', null]`，结果可能变成 “btn,active,” 这种带多余逗号的字符串。传对象的话，布尔值 false 会变成字符串 “false” 出现在类名里，数字也会变成字符串，一个普通对象直接变成 “[object Object]” ，看起来乱七八糟。 从 API 62.0 开始，这一切都理顺了。数组现在会用空格来连接，而且自动去掉那些空值、假值，比如 false、null、undefined 和空字符串。所以刚才那个数组会干净地输出 “btn active”。传对象的话，只有那些属性值为真（truthy）的键名才会被添加到类列表里，布尔、数字、函数这些不会变成奇怪的类名，直接就被忽略了。这样做出来的 DOM 类属性特别整齐，不容易出错。 当然，如果你确实想把一个数字或者布尔值显示为类名，那就要自己动手，在绑定表达式里先用 String() 转成字符串，这样才会被呈现出来。新版本这样做，其实是鼓励我们写出更规范、更好维护的代码。 所以，如果你还没升级，我强烈建议把组件的 API 版本调到 62.0 或更高，这样就能用上更聪明的类绑定逻辑。已经上线的项目，也可以趁这个机会检查一下那些动态样式的地方，看看有没有因为版本升级变得更清爽。这个小小的改动，会让你的模板代码更可靠，也更易读。 好了，关于类对象绑定就讲到这儿，下节课我们继续。