Javascript Vuejs三元运算符/条件运算符不以v-bind样式工作

我在尝试为Vuejs中的项目样式实现条件时遇到了一些奇怪的行为

我看过S.O.关于如何通过插值字符串或计算样式对象实现三元的文章。我两种都试过了，但都不管用

鉴于该部门：

<div 
    :class="{'radar__container':true,'inactive':inactive}"
    :style= "[inactive ? {getStyleRadarContainerInactive} : {getStyleRadarContainer}]"
  >

这将使这些项中的每一项都缩小比例（因为“不透明度”属性中的比例（0）），但“样式”属性根本不会渲染。我还尝试在style道具上使用内联三元（因为比例是两个属性之间唯一的变化：

transform: 'translate(-50%,-50%) ' + inactive ? 'scale(' + radarItem.scale + ')' : 'scale(0)',

---

我缺少什么？

尝试在V-bind:style中使用条件

v-bind:style= "[condition ? {style_A} : {style_B}]"

---

样式绑定需要一个对象。通过将三元数据括在方括号中，您将传入一个包含一个对象的数组，这是不必要的。此外，您将返回的对象括在三元数据括在方括号中的任一侧，这将进一步嵌套它们。删除这些方括号将使返回的对象可以在方括号中处理正确地说：

<div 
    :class="{'radar__container':true,'inactive':inactive}"
    :style= "inactive ? getStyleRadarContainerInactive : getStyleRadarContainer"
  >

---

您的解决方案不起作用，因为您产生了双花括号

  :style="[{ obj: { styleObject }}]" // This won't work

您可以使用包含styleObject的数组，也可以仅使用styleObject

例如

---

如果您这样使用，应该有以下功能：

:style= "[inactive ? {...getStyleRadarContainerInactive} : {...getStyleRadarContainer}]"

---

有趣的是，我不知道如果你提供一个对象数组，它会合并它们……谢谢你。这在某个时候可能会很有用：）我会更新我的答案。是的，它们会与右侧对象的属性合并，覆盖左侧对象的属性

  :style="[ { color: 'blue' } ]"
  :style="{ color: 'blue' }"

:style= "[inactive ? {...getStyleRadarContainerInactive} : {...getStyleRadarContainer}]"