区别vue中:class和:style

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

在 Vue.js 中，class 和 style 是用来设置 HTML 元素的 CSS 样式的两个不同属性。它们在 Vue 模板中使用时有一些关键的区别和特性：

---

一、:class（动态类绑定）

class 用于设置元素的 CSS 类名。你可以使用 :class（缩写为 v-bind:class）来动态绑定类名

基本用法

<div class="my-class">Hello</div>
<div :class="myClass">Hello</div>

export default {
  data() {
    return {
      myClass: 'active'
    };
  }
};
//上面的例子中，myClass 的值是 'active'，所以 <div> 元素将会有 active 类名。

对象用法

你可以使用对象语法来根据条件动态添加或移除类名：

<div :class="{ active: isActive, 'text-bold': isBold }">Hello</div>

export default {
  data() {
    return {
      isActive: true,
      isBold: false
    };
  }
};
//在这个例子中，active 类将会被添加到 <div> 元素中，因为 isActive 为 true。text-bold 类不会被添加，因为 isBold 为 false。

二、:style(动态样式绑定)

style 用于直接设置 HTML 元素的内联样式。你可以使用 :style（缩写为 v-bind:style）来动态绑定样式对象或样式字符串。

静态样式：
<div style="color: red;">Hello</div>
动态样式：
<div :style="myStyle">Hello</div>
javascript
export default {
  data() {
    return {
      myStyle: {
        color: 'red',
        fontSize: '20px'
      }
    };
  }
};
//上面的例子中，myStyle 对象的样式将会被应用到 <div> 元素中。

总结

:class：用于动态添加或移除 CSS 类名。可以使用字符串、对象或数组语法来定义和管理类名的绑定。
:style：用于动态设置内联样式。可以使用对象或数组语法来定义样式属性的绑定。
这两者都提供了在 Vue 组件中处理样式的灵活性，允许你根据组件的状态或属性动态地改变样式。