v-bind:class用法

v-bind:class 是 Vue.js 框架中用于绑定类名的指令，它可以根据数据动态地绑定一个或多个类名到 HTML 元素上。

1. 绑定对象

<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

• isActive 和 hasError 是 Vue 实例中的数据属性。

• 如果 isActive 的值为 true，则 div 元素会添加 active 类名；如果 hasError 的值为 true，则会添加 text-danger 类名。

• 需要注意的是，当class命名是多个单词加符号拼接，需要将其用引号包起来，否则不识别

<div v-bind:class="{ 'text-danger': hasError }"></div>

 2. 绑定数组

<div v-bind:class="[activeClass, errorClass]"></div>

• activeClass 和 errorClass 是 Vue 实例中的数据属性，它们可以是字符串或对象。

• 如果 activeClass 的值是 'active'，errorClass 的值是 'text-danger'，那么 div 元素的类名会是 'active text-danger'。

• 如果 activeClass 是一个对象，比如 { active: true }，那么它会按照对象的方式解析类名。

3. 绑定对象和数组的组合 

<div v-bind:class="[baseClass, { active: isActive, 'text-danger': hasError }]"></div>

• baseClass 是一个普通的类名字符串。

• { active: isActive, 'text-danger': hasError } 是一个对象，根据 isActive 和 hasError 的值动态添加类名。

• 这种方式可以同时使用数组和对象的方式绑定类名，非常灵活