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

我试图将元素的最小高度设置为.vue页面。样式属性绑定到styleObject

    <b-container class="mt-3" v-bind:style="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";
      }
    }

容器高度未调整

最佳答案

在声明其他数据道具时，不应将它们用作其他数据道具的值，因为它们不会是被动的。

避免：

styleObject: {
      minHeight: this.containerHeight
    }

只需将其设置为null并执行

styleObject: {
      minHeight: null
    }

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