我有以下代码:
<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; : '']
但这只是给出了很多错误,这让我认为我处理这一切都是错误的。
要让我的风格具有简短的条件语句,正确的方法是什么?
最佳答案
我会使用返回样式对象的计算属性。
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>
关于vue.js - Vue内联条件if?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52506952/