我正在尝试将元素的最小高度设置为 .vue
页面。 style 属性绑定(bind)到 styleObject
<b-container class="mt-3" v-bind:style="styleObject">
我在我的脚本中使用 mounted 来设置 styleObject。
export default {
data: function() {
containerHeight: null,
styleObject: {
minHeight: this.containerHeight
}
},
mounted() {
let headerHeight = document.querySelector('#header').offsetHeight;
let navHeight = document.querySelector('#main-menu').offsetHeight;
let footerHeight = document.querySelector('#footer').offsetHeight;
let ht = screen.height - (headerHeight + navHeight + footerHeight);
alert(ht);//the calculated height is displayed
this.containerHeight = ht + "px";
}
}
容器高度不调整
最佳答案
当你声明它们时,你不应该使用其他数据 Prop 作为另一个数据 Prop 的值,因为它们不会是 react 性的。
避免:
styleObject: {
minHeight: this.containerHeight
}
只需将其设置为 null 即可
styleObject: {
minHeight: null
}
this.styleObject.minHeight = ht + "px";
关于javascript - 如何在 Vue JS 中设置动态样式属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59589272/