Vue内联条件if？

Question

我有以下代码：

    <div
        :id="'object' + object.id""
        :style="'position:absolute !important; width:' + object.width + '% !important; height:' + object.height + '% !important;'">
    <div

这可以正常工作并且渲染得很好。

我现在想在其中添加条件内容。类似的东西

if object.background == 'solid'
 background-color: #ffffff;
endif

我尝试通过 Vue 内联 if 来实现这一点，它给了我这个：

[object.background == 'solid' ?背景颜色：#ffffff 重要； ： '']

但这只是给出了很多错误，这让我认为我处理这一切都是错误的。

对我来说，以我的风格实现简短的条件语句的正确方法是什么？

Answer 1

我会使用返回样式对象的计算属性。

new Vue({
  el: "#app",
  data: {
    width: '200px',
    height: '200px',
    background: 'solid',
  },
  computed: {
    styleObj() {
      return {
        position: 'absolute !important',
        width: `${this.width} !important`,
        height: `${this.height} !important`,
        background: this.background === 'solid' ? 'green' : 'yellow',
      };
    },
  },
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<div id="app">
    <div :style="styleObj">    
    </div>
</div>

Answer 2

我不知道这是否应该被标记为这个问题的重复：Condition in V-Bind:Style VueJS

但是，此方法仅用于类绑定，https://vuejs.org/v2/guide/class-and-style.html

也就是说，你问：

对于我来说，以我的风格实现简短的条件语句的正确方法是什么？

我认为这不是正确的方法。我的意思是，正确的方法是编写 css 类并有条件地应用它们，因为这些是记录在案的方法，如果您必须应用直接样式来覆盖适用于相关元素的所有其他样式，请将此保留。

其他正确的方法是使用data、props，甚至是computed property 或method。

此外，您可以同时拥有style 和:style 属性，vue 会为您混合它们，因此您可以在普通属性上定义基本样式，在样式绑定上定义“其他东西”。

但正如我所说，将它留给您真正需要在样式属性上使用它的极端情况。