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

我尝试通过if内联if实现这一点，这给了我

[object.background =='固体'吗？背景颜色：#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会为您混合使用它们，因此您可以在normal属性中定义基本样式，在样式绑定中定义“其他内容”。 / p>

但是，正如我所说，在极端情况下将其保留在style属性上确实需要它。

Vue内联条件式是否？

2 个答案: