javascript - Vuejs 三元运算符/条件在 v-bind-style 中不起作用

Question

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

我见过S.O.关于如何通过内插字符串或计算样式对象实现三元的帖子。我都试过了，但都不能正常工作。

给定这个 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;
    },
  }

这应该使这些元素中的每一个都缩小(因为不透明度属性中的 scale(0))，但是样式属性根本不呈现。我还在 style Prop 上尝试了一个内联三元组(因为这个比例是两个属性之间唯一变化的东西:

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

我错过了什么？

Answer 1

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

<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>