javascript - vue 里的 style 能加入判断吗？

问题描述

问 题

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

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

new Vue({
    el: "#app",
    data: {
        editableCheckNum: 0
    }
})

解决方案

首先，你需要对Vue的条件渲染有个更深入的了解。
有三种办法可以解决你的问题：

一：使用三元表达式

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

二：使用计算属性

<div :style="computeStyle">555</div>

computed: {
  computeStyle() {
    return { opacity: !this.editableCheckNum ? 0.5 : 1 }
  }
}

三：使用class

<div :class="{ 'this-div-class': !this.editableCheckNum }">555</div>

.this-div-class {
  opacity: .5
}

这篇关于javascript - vue 里的 style 能加入判断吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！