vue.js - 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' ? background-color: #ffffff important; : '']

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

要让我的风格具有简短的条件语句，正确的方法是什么？

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>