Vuejs中的三元运算符/条件语句在v-bind-style中无效。

Question

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

我已经看到了一些关于如何通过插值字符串或计算样式对象来实现三元操作符的StackOverflow帖子。但是我两种方法都尝试过，但都没有正常工作。

考虑到这个div：

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

我将采用这种样式：

computed: {
    getStyleRadarContainer: function(){

        let styleRadarContainer = {
            left: this.radarItem.posX*100 + '%', 
            top: this.radarItem.posY*100 + '%',
            transform: 'translate(-50%,-50%) scale(' + this.radarItem.scale + ')',
            opacity: this.radarItem.opacity,
        }

        return styleRadarContainer;
    },
    getStyleRadarContainerInactive: function(){

        let styleRadarContainerInactive= {
            left: this.radarItem.posX*100 + '%', 
            top: this.radarItem.posY*100 + '%',
            transform: 'translate(-50%,-50%) scale(0)',
            opacity: this.radarItem.opacity,
        }

        return styleRadarContainerInactive;
    },
  }

这应该使得每个项目都缩小（因为opacity属性中有scale(0)），但实际上style属性根本没有被渲染。我还尝试在style属性上使用行内三元运算符（因为scale是两种属性中唯一变化的东西：

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

我错过了什么？

- mheavers

Answer 1

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

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

https://v2.vuejs.org/v2/guide/class-and-style.html

- Deepu Reghunath

Answer 2

样式绑定需要一个对象。将三目运算符括在方括号中，会传入包含一个对象的数组，这是不必要的。此外，你将三目运算符返回的对象两侧都用了括号包裹，这使它们进一步嵌套。移除这些括号将使返回的对象能够被正确处理：

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

作为一个小提示，如果你将一个包含对象的变量添加到另一个对象中而没有指定属性名称，则变量名将作为属性名称使用。

var myObject = {
  property: 'value'
};

$('#output').html(JSON.stringify({myObject}));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="output"></div>

- LightBender

Answer 3

如果您像这样使用扩展运算符，则应该可以工作：

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

- Christian Carrillo

Answer 4

你的解决方案没有起作用，因为你产生了双花括号

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

你可以使用包含styleObjects的数组或仅使用一个styleObject。

例如：

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

- MarcRo

---

有趣的是，我不知道如果提供一个对象数组它会合并它们...谢谢你。这在某些时候可能非常有用 :) 我会更新我的答案。 - LightBender

是的，它们与右侧对象的属性合并，覆盖左侧对象的属性。 - MarcRo