属性与 Class 绑定
动态绑定属性、Class 和样式
属性与 Class 绑定 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 3 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 3 节课。
绑定类和样式
一个常见需求是根据状态更改元素的类或样式。
Vue 对 :class 和 :style 做了特殊处理，因此您可以传入对象和数组，而不只是字符串。
:class 对象语法
向 :class 传入一个对象。键是类名，值为真时就会包含相应的类。
<div :class="{ active: isActive, disabled: isDisabled }">
Status box
</div>
<!-- if isActive is true, the "active"
class is applied -->组合静态类和动态类
静态的 class 属性和动态的 :class 会合并到一起。
<div class="card" :class="{ highlighted: isSelected }">
Always has "card";
adds "highlighted" when selected.
</div>:class 数组语法
传入一个数组即可应用多个类。
<div :class="[baseClass, themeClass]">Box</div>
<!-- data:
baseClass = "panel"
themeClass = "dark" -->数组中的条件表达式
您可以在数组中混用条件表达式。
<div :class="[isActive ? 'active' : '', errorClass]">
...
</div>
<!-- or nest an object inside the array -->
<div :class="[baseClass, { active: isActive }]">
...
</div>绑定内联样式
:style 指令使用对象绑定内联样式。
请使用 camelCase 属性名，例如 fontSize。
<p :style="{ color: textColor, fontSize: size + 'px' }">
Styled text
</p>
<!-- data: textColor = "red", size = 18 -->使用数组绑定 :style
您可以传入样式对象数组，Vue 会将它们合并。
<div :style="[baseStyles, overrideStyles]">
Merged styles
</div>自动添加前缀
当 CSS 属性需要供应商前缀时，Vue 可以在浏览器支持的情况下自动添加前缀。
- 您编写标准属性
- 如有需要，Vue 会应用正确的前缀
这样可以让样式绑定保持简洁。
动态绑定属性
任何属性都可以通过 :attr 动态绑定。
<img :src="photoUrl" :alt="photoCaption" />
<input :placeholder="hintText" :maxlength="limit" />
<a :href="link" :target="openInNewTab ? '_blank' : '_self'">Go</a>布尔属性
对于 disabled 这类布尔属性，只有当值为真时，Vue 才会包含该属性。
<button :disabled="isSubmitting">Submit</button>
<!-- if isSubmitting is false,
the disabled attribute is removed -->按条件绑定多个类
这是一个同时切换多个类的实用示例。
<li
class="todo"
:class="{
done: task.completed,
overdue: task.isLate,
priority: task.urgent
}"
>
{{ task.title }}
</li>快速检查
测试您对类绑定和样式绑定的理解。
回顾：属性绑定和类绑定
您学会了动态绑定：
- :class 对象语法根据真值切换类
- :class 数组语法应用类列表
- :style 使用 camelCase 键绑定内联样式
- 任何属性都可以通过 :attr 绑定
- 布尔属性仅在值为真时显示
下一节：component 基础与通信。
常见问题解答
「属性与 Class 绑定」课时是免费的吗？
是的 — 「属性与 Class 绑定」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 3 节课。
「属性与 Class 绑定」这节课中我会学到什么？
动态绑定属性、Class 和样式 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Vue Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 3 节。
「属性与 Class 绑定」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Vue Academy 课中编写并运行代码吗？
能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。