vue 里的 style 能加入判断吗？

Question

如何判断editableCheckNum为0时启用opacity: 0.5

<div :style="{!editableCheckNum:'opacity: 0.5'}">555</div>

new Vue({

    el: "#app",

    data: {

        editableCheckNum: 0

    }

})

Answer 1

首先，你需要对Vue的条件渲染有个更深入的了解。有三种办法可以解决你的问题：一：使用三元表达式<div&nbsp;:style="{&nbsp;'opacity':&nbsp;!editableCheckNum&nbsp;?&nbsp;0.5&nbsp;:&nbsp;1&nbsp;}">555</div>二：使用计算属性<div&nbsp;:style="computeStyle">555</div> computed:&nbsp;{ &nbsp;&nbsp;computeStyle()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{&nbsp;opacity:&nbsp;!this.editableCheckNum&nbsp;?&nbsp;0.5&nbsp;:&nbsp;1&nbsp;} &nbsp;&nbsp;} }三：使用class<div&nbsp;:class="{&nbsp;'this-div-class':&nbsp;!this.editableCheckNum&nbsp;}">555</div> .this-div-class&nbsp;{ &nbsp;&nbsp;opacity:&nbsp;.5}