Vue基础教程（84）class与style绑定绑定HTML样式（class）之对象语法：别再用土办法了！Vue的class绑定让你写出“会思考”的样式代码

一、开篇：为什么你的样式代码需要“进化”？

还记得刚学前端时，我们是怎么写样式的吗？在HTML里写满class="btn btn-primary active"，在JS里用element.classList.add()和remove()来回切换，代码又长又难维护。

直到我遇到Vue的class对象语法，才恍然大悟：原来样式可以这么“聪明”！

想象一下这个场景：一个按钮，正常时是灰色，点击后变蓝色并带阴影，禁用时变灰色半透明。用传统方式，你得写一堆JS去添加删除class，代码像下面这样：

// 传统方式 - 又长又难读
if (isActive) {
  button.classList.add('active');
  button.classList.remove('normal');
} else {
  button.classList.add('normal');
  button.classList.remove('active');
}

if (isDisabled) {
  button.classList.add('disabled');
}

但在Vue里，同样的逻辑只需要一行：

<button :class="{ active: isActive, 'text-bold': isBold, disabled: isDisabled }">
  智能按钮
</button>

是不是感觉代码瞬间清爽了？这就是Vue class绑定的魔力！

二、对象语法：让你的class“活”起来

2.1 基础概念：它到底是什么？

简单来说，对象语法就是用一个JavaScript对象来决定哪些class应该被应用。

对象的结构长这样：

key：你想要应用的class名
value：一个布尔值，为true时应用这个class，为false时不应用

<div :class="{ active: isActive, 'error': hasError }"></div>

对应的数据：

data() {
  return {
    isActive: true,
    hasError: false
  }
}

最终渲染结果：

<div class="active"></div>

看到没？只有active被应用了，因为isActive为true，而hasError为false。

2.2 为什么这比传统方式好？

声明式编程：你只需要告诉Vue"在什么条件下用什么class"，不用手动操作DOM
代码更简洁：一行代码替代多行JS操作
更易维护：所有样式逻辑集中在一处，一目了然
响应式：数据变化时，样式自动更新，不用手动同步

三、实战演练：从简单到复杂，一步步掌握

3.1 基础用法：切换单个class

让我们从最简单的开始：一个可以切换选中状态的标签。

<template>
  <div>
    <span 
      :class="{ selected: isSelected }" 
      @click="isSelected = !isSelected"
      class="tag"
    >
      点击我切换状态
    </span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isSelected: false
    }
  }
}
</script>
<style>
.tag {
  display: inline-block;
  padding: 8px 16px;