Vue js 将多个样式属性绑定到一个元素答案

【问题标题】：Vue js bind multiple style properties to an elementVue js 将多个样式属性绑定到一个元素
【发布时间】：2022-01-01 23:59:48
【问题描述】：

这会将 background-color 属性绑定到 <td> 元素。

    <td :style="{backgroundColor: (props.item.release_date ? 'green' : 'transparent' ) }">
Some text
</td>

但是，如果我不仅想绑定背景颜色，同时还想绑定前景色（正常颜色属性），该怎么办。

如何将多个样式属性绑定到一个元素？

【问题讨论】：

【解决方案1】：

首先，css 中没有前景色。您可以使用逗号分隔的多种样式 key: value 对，例如：

:style="{
   backgroundColor: (props.item.release_date ? 'green' : 'transparent' ), 
   color: 'red', 
   width: '120px' 
 }"

【讨论】：

【解决方案2】：

我的情况是我无法将所有样式放在一个对象中，所以我在 vue 中找到了另一种样式绑定方式：

基本上你可以有多个样式对象并将它们作为数组传递给样式属性，如下所示：

:style="[styleObjectOne, styleObjectTwo]"

【讨论】：