[英]How do I set a dynamic style property in Vue JS
I'm trying to set the minimum height of an element is a .vue
page.我正在尝试将元素的最小高度设置为.vue
页面。 The style attribute has a bind to the styleObject
style 属性绑定到styleObject
<b-container class="mt-3" v-bind:style="styleObject">
I'm using mounted in my script to set up the styleObject.我在我的脚本中使用 mount 来设置 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";
}
}
The container height does not adjust容器高度不调整
You should not use other data props as a value for another data prop when you declare them as they won't be reactive.当你声明它们时,你不应该使用其他数据道具作为另一个数据道具的值,因为它们不会是反应性的。
Avoid:避免:
styleObject: {
minHeight: this.containerHeight
}
Just set it to null and do只需将其设置为 null 并执行
styleObject: {
minHeight: null
}
this.styleObject.minHeight = ht + "px";
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.