x-data本身不直接控制class切换，需配合x-bind:class（或:class）实现；它仅定义响应式数据，:class通过对象语法（如{"active": isActive}）读取x-data状态来动态绑定类名。
如何用 x-data 控制 class 切换？
Alpine.js 的 x-data 本身不直接“引入”CSS类，它只定义响应式数据；真正绑定类靠的是 x-bind:class 或简写 :class。你得把类名逻辑写在 :class 表达式里，让它读取 x-data 中的状态。
常见错误是以为 x-data 里写个字符串就能自动加类——比如 x-data="{ className: 'active' }" 然后啥也不做，结果 class 完全没变。这不行，必须显式绑定。
-
:class接收对象、数组或字符串，推荐用对象语法：:class="{ 'bg-blue-500': isActive, 'text-white': isReady }" - 对象键是类名（带引号），值是布尔表达式，依赖
x-data里的变量 - 如果类名含连字符（如
md:flex），必须加引号，否则 JS 解析报错："md:flex": isMd
为什么 :class 里用对象比字符串拼接更安全？
字符串拼接（如 :class="'btn ' + (primary ? 'btn-primary' : 'btn-default')"）容易漏空格、多空格，还难维护。对象语法由 Alpine 自动合并类名，且跳过 falsey 值，语义清晰、不易出错。
尤其当多个状态交叉影响时——比如按钮既要根据 loading 加 opacity-50，又要根据 disabled 加 cursor-not-allowed，对象写法一目了然：
立即学习“前端免费学习笔记（深入）”；
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
:class="{
'opacity-50': loading,
'cursor-not-allowed': disabled,
'bg-green-600 hover:bg-green-700': !loading && !disabled
}"
注意：对象里不能用三元运算符（condition ? 'a' : 'b'），会报错；要用逻辑表达式或提前算好布尔值。
动态类名含变量时怎么避免 XSS 或语法错误？
别直接拼接用户输入到 class 名里。比如 :class="userColor + '-bg'" 是危险的——万一 userColor 是 "onload=alert(1)"，虽然不会执行 JS，但会生成非法 class，破坏样式甚至触发浏览器警告。
- 只允许白名单内的值参与类名生成，例如：
:class="{ 'text-red-500': color === 'red', 'text-blue-500': color === 'blue' }" - 若必须动态构造，先用 computed 属性过滤：
computedClass() { return ['text', this.userColor].join('-') }，再在:class里调用：:class="computedClass()" - 所有带连字符、斜杠、数字开头的类名（如
2xl:text-lg）必须加引号，否则解析失败
使用 Alpine.store() 共享类状态时要注意什么？
多个组件共用同一套开关状态（比如暗色模式）时，用 Alpine.store('theme', { dark: true }) 比在每个 x-data 里重复定义更干净。但记得在 :class 中访问 store 要加 $store.theme.dark，不是 theme.dark。
容易踩的坑：
- store 初始化必须在
Alpine.start()之前，否则$store为空 - store 属性修改后，绑定的
:class会自动响应，但前提是组件已挂载——首次渲染前改 store 不会触发重绘 - 不要在
:class里写复杂函数调用，比如:class="getThemeClasses($store.theme)"，这会让 Alpine 失去响应式追踪，应改用计算属性或 store 内置 getter
类名绑定这事看着简单，但真要兼顾可读性、安全性、响应及时性，关键不在怎么写，而在想清楚哪些状态该进 x-data、哪些该进 $store、哪些压根不该动态生成。
