Vue.js如何在现有内联style绑定中按条件新增额外样式？

完全可以直接在现有内联绑定中实现，不需要额外使用computed属性，以下是两种常用实现方式： #

方式1：三元表达式直接赋值 #

在原有样式对象内新增borderBottom字段，条件不成立时赋值为undefined，Vue会自动过滤掉值为undefined的样式属性：

:style="{ 
  'background-color': bgColor, 
  color: fColor,
  // 注意border需要同时指定宽度、样式、颜色才会生效，可替换为你需要的样式和颜色
  borderBottom: isInCheckout ? '2px solid #333' : undefined 
}"

方式2：数组语法结合条件对象 #

用数组形式包裹原有固定样式对象和条件样式对象，条件不成立时返回空对象，不会对原有样式产生影响，可读性更强：

:style="[
  { 'background-color': bgColor, color: fColor },
  isInCheckout ? { borderBottom: '2px solid #333' } : {}
]"

补充说明：如果边框样式或颜色是动态值，直接替换示例中的固定字符串为对应的变量即可。

内容的提问来源于stack exchange，提问作者NewTech Lover