在 Vue.js 中，我们可以通过 v-bind 指令来绑定元素的 class 和 style。这个功能非常强大，可以让我们动态地添加或删除 class 和 style，从而控制元素的样式。
Class 绑定
对象语法
我们可以使用对象语法来绑定 class。例如：
---- --------------- ------- -------- ---------
这个例子中，我们绑定了一个名为 active 的 class，如果 isActive 为 true，那么这个 class 就会被添加到 div 元素上。
我们也可以绑定多个 class，例如：
---- --------------- ------- --------- -------------- -------- ---------
这个例子中，我们绑定了两个 class，一个是 active，一个是 text-danger。如果 isActive 为 true，则添加 active class，如果 hasError 为 true，则添加 text-danger class。
我们还可以使用计算属性来生成 class 对象，例如：
---- ---------------------------------
----- -
--------- -----
--------- -----
--
--------- -
------------ -------- -- -
------ -
------- ------------- -- ---------------
-------------- -------------
-
-
-这个例子中，我们使用一个计算属性 classObject 来生成 class 对象。如果 isActive 为 true 且 hasError 为 false，则添加 active class，如果 hasError 为 true，则添加 text-danger class。
数组语法
我们也可以使用数组语法来绑定 class。例如：
---- --------------------------- -------------------
----- - ------------ --------- ----------- ------------- -
这个例子中，我们使用数组语法来绑定 class，activeClass 和 errorClass 都是变量，它们的值会被添加到 div 元素的 class 属性中。
我们还可以在数组中使用三元表达式来切换 class，例如：
---- ----------------------- - ----------- - --- -------------------
这个例子中，如果 isActive 为 true，则添加 activeClass，否则不添加任何 class。
Style 绑定
对象语法
我们可以使用对象语法来绑定 style。例如：
---- --------------- ------ ------------ --------- -------- - ---- ---------
----- - ------------ ------ --------- -- -
这个例子中，我们绑定了两个 style，一个是 color，一个是 fontSize。它们的值分别是 activeColor 和 fontSize + 'px'。
我们也可以使用计算属性来生成 style 对象，例如：
---- ---------------------------------
----- -
------------ ------
--------- --
--
--------- -
------------ -------- -- -
------ -
------ -----------------
--------- ------------- - ----
-
-
-这个例子中，我们使用一个计算属性 styleObject 来生成 style 对象。它包含了两个 style，一个是 color，一个是 fontSize。
数组语法
我们也可以使用数组语法来绑定 style。例如：
---- -------------------------- -------------------------
----- -
----------- -
------ ------
--------- ------
--
----------------- -
--------- ------
-
-这个例子中，我们使用数组语法来绑定 style，baseStyles 和 overridingStyles 都是对象。它们的值会被合并成一个对象，然后添加到 div 元素的 style 属性中。在合并时，后面的对象会覆盖前面的对象。
总结
在 Vue.js 中，我们可以通过 v-bind 指令来绑定元素的 class 和 style。我们可以使用对象语法或数组语法来绑定 class 和 style，也可以使用计算属性来生成 class 和 style 对象。这个功能非常强大，可以让我们动态地添加或删除 class 和 style，从而控制元素的样式。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6507bc0f95b1f8cacd2fbdfb