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

Question

我正在尝试将元素的最小高度设置为 .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";
      }
    }

容器高度不调整

Answer 1

当你声明它们时，你不应该使用其他数据 Prop 作为另一个数据 Prop 的值，因为它们不会是 react 性的。

避免:

styleObject: {
      minHeight: this.containerHeight
    }

只需将其设置为 null 即可

styleObject: {
      minHeight: null
    }

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