Javascript 如何在Vue JS中设置动态样式属性

我试图将元素的最小高度设置为

.vue

页面。style属性绑定到

styleObject

我在脚本中使用mounted来设置styleObject

导出默认值{
数据：函数（）{
containerHeight:null，
样式对象：{
minHeight:这是集装箱的重量
}
},
安装的（）{
让headerHeight=document.querySelector（“#header”）.offsetHeight；
让navHeight=document.querySelector（“#主菜单”）.offsetHeight；
让footerHeight=document.querySelector（“#footer”）.offsetHeight；
设ht=屏幕高度-（头部高度+导航高度+页脚高度）；
警报（ht）；//显示计算的高度
this.containerHeight=ht+“px”；
}
}

---

容器高度不可调整

当您声明其他数据道具时，不应将其用作其他数据道具的值，因为它们不会反应

避免：

styleObject: {
      minHeight: this.containerHeight
    }

只需将其设置为null并执行

styleObject: {
      minHeight: null
    }

---

或者，您可以将

styleObject

定义为一个计算属性，使其具有反应性。

this.styleObject.minHeight = ht + "px";