可以使用计算属性或方法将动态样式应用于元素

Question

试图在动态样式中使用传播操作员（在这个简化的示例中不用有用，但在我的真实情况中使用多种样式对象很重要）。此外，我需要使用带有参数的方法，但它不起作用。实际上，即使有一个计算的属性，它也无效。

我在做什么错？

https://jsfiddle.net/goldorak/79wrj301/2/

<div id="app">
  <div class="item" :style="{ ...styleComputed }">
    item
  </div>
  
  <div class="item" :style="{ ...styleMethod('red') }">
    item
  </div>
</div>

”

new Vue({
  el: "#app",
  computed: {
        styleComputed: function(){
        return { 'background-color': 'red' };
    }
  },
  methods: {
    styleMethod: function(val){
        return { 'background-color': val };
    }
  }
})

Answer 1

就像您可以从摘要中看到的那样，您只是忘了参考Vue：

new Vue({
  el: "#app",
  computed: {
    styleComputed() {
      return { 'background-color': 'red' };
    }
  },
  methods: {
    styleMethod(val) {
      return { 'background-color': val };
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<div id="app">
  <div class="item" :style="{ ...styleComputed }">
    item
  </div>
  
  <div class="item" :style="{ ...styleMethod('blue') }">
    item2
  </div>
</div>

Answer 2

我猜破坏性打破了反应性吗？

您应该使用数组绑定，而是将多个对象绑定到类 /样式中：

<div
  :style="[styledComputed, { opacity: 1 }]"
  :class="['static-class', { active: isActive }, myComputedClasses]"
>
</div>