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
}

回答:

你可以选择计算属性

<div id='app' :style="diaphaneity">555</div>

new Vue({
  el: "#app",
  data: {
      editableCheckNum: 0
  },
  computed: {
    // a computed getter
    diaphaneity: function () {
        // 若为0
        if(!this.editableCheckNum) {
            // 50%透明度
            return 'opacity: 0.5';
        }
        // 否则不添加样式
        return '';
    }
  }
})

回答:

条件渲染

回答:

<div :style=”{‘opacity: opacity’}”>555</div>
注:我觉得这样写更像vue,是有就渲染,没有就不渲染。

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注