javascript - vue 里的 style 能加入判断吗?
PHPz
PHPz 2017-04-11 12:58:35
[JavaScript讨论组]

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

555

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

学习是最好的投资!

全部回复(4)
迷茫

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

一:使用三元表达式

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

二:使用计算属性

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

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

三:使用class

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

.this-p-class {
  opacity: .5
}
阿神

条件渲染

PHP中文网

你可以选择计算属性

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

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

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号