在 Vue.js 中，我们经常需要根据某些条件来动态绑定 class 样式，比如根据用户是否登录来显示不同的样式。Vue.js 提供了多种方式来实现动态绑定 class 样式，本文将介绍其中的几种方式。
直接绑定
在 Vue.js 中，我们可以使用 v-bind:class 指令来直接绑定 class 样式。这个指令接受一个对象作为参数，对象的属性名是 class 名称，属性值是一个布尔值，表示该 class 是否应用。例如：
<div v-bind:class="{ 'active': isActive }"></div>上面的代码中，active 是一个 class 名称，isActive 是一个布尔值，表示是否应用该 class。如果 isActive 的值为 true，则该元素会应用 active class 样式。
绑定数组
除了绑定对象，我们还可以使用数组来动态绑定 class 样式。数组中的每个元素都是一个 class 名称，例如：
<div v-bind:class="[activeClass, errorClass]"></div>
上面的代码中，activeClass 和 errorClass 都是 class 名称，如果它们的值都为 true，则该元素会同时应用这两个 class 样式。
使用计算属性
如果我们需要根据多个条件来动态绑定 class 样式，可以使用计算属性来实现。计算属性是一个函数，返回一个对象，对象的属性名是 class 名称，属性值是一个布尔值，表示该 class 是否应用。例如：
<div v-bind:class="classObject"></div>
-- -------------------- ---- -------
----- -
--------- -----
-------- -----
--
--------- -
------------ ---------- -
------ -
------- --------------
------ ------------
-
-
-上面的代码中，classObject 是一个计算属性，它返回一个对象，对象的属性名是 active 和 error，属性值是一个布尔值，表示是否应用该 class。如果 isActive 的值为 true，则该元素会应用 active class 样式；如果 isError 的值为 true，则该元素会应用 error class 样式。
使用函数
如果我们需要根据更复杂的条件来动态绑定 class 样式，可以使用函数来实现。函数接受一个参数，表示该元素原来的 class 样式。函数返回一个对象，对象的属性名是 class 名称，属性值是一个布尔值，表示该 class 是否应用。例如：
<div v-bind:class="classObject"></div>
-- -------------------- ---- -------
----- -
--------- -----
-------- -----
--
-------- -
--------- ------------------ -
------ -
--------- --------------
-------- ------------
-
-
-上面的代码中，getClass 是一个函数，它接受一个参数 oldClass，表示该元素原来的 class 样式。函数返回一个对象，对象的属性名是 active 和 error，属性值是一个布尔值，表示是否应用该 class。如果 isActive 的值为 true，则该元素会应用 active class 样式；如果 isError 的值为 true，则该元素会应用 error class 样式。如果 oldClass 的值不为空，返回的对象会和 oldClass 合并。
总结
在 Vue.js 中，我们可以使用 v-bind:class 指令来直接绑定 class 样式，也可以使用数组和计算属性来动态绑定 class 样式。如果需要更复杂的条件，可以使用函数来实现。掌握这些技巧，可以让我们更方便地处理 class 样式，提高开发效率。
示例代码
下面是一个完整的示例代码，演示了如何使用计算属性来动态绑定 class 样式：
-- -------------------- ---- -------
--------- -----
------
------
------------- ----- ---------------
------- ------------------------------------------------------------
-------
------- -
------ ----
-
------ -
----------------- -------
-
--------
-------
------
---- ---------
------ --------------- ------------------- ----------
------ --------------- ------------------ ---------
---- ---------------------------
---- -- - -----
------
------
--------
--- --- - --- -----
--- -------
----- -
--------- -----
-------- -----
--
--------- -
------------ ---------- -
------ -
------- --------------
------ ------------
-
-
-
--
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/656d3ac2d2f5e1655d589f8e