Question

我有一个棘手的布局，我相信它只能使用JavaScript进行响应，但是我无法通过绑定数据获得内联样式来完成此任务。图像周围有一个包装元素，我想将其作为图像的高度加上80px。为简便起见，我将发布需要共同使用的两个元素，并删除多余的标记，因为它们无关紧要。

<v-flex v-resize="onResize" v-bind:style="{height: this.imageHeight}" xs12 md6>
  {{this.imageHeight}}
  <img src="../assets/images/image1.jpg" alt="image" ref="desktop-image">
</v-flex>

在数据中，我首先将imageHeight定义为0，目的是在页面加载或调整屏幕大小后立即更新该值。

data () {
  return {
    imageHeight : 0
  }
}

然后在mounted()中，将imageHeight数据重新定义为我想要的高度。

this.imageHeight = this.$refs["desktop-image"].offsetHeight + 80;

我也在调整大小的方法中包括了它。

 onResize () {
    this.imageHeight = this.$refs["desktop-image"].offsetHeight + 80;
  }

一旦页面加载或调整屏幕大小，我在图像上方获得的输出{{this.imageHeight}}值将正确更新，但不会在图像元素上的v-bind:style中更新，因此高度保持不变在0px。

如何像其他地方一样获取内联样式数据以进行更新？

Answer 1

height CSS属性必须为：

具有长度单位的<length>值（用于非零值）；例如200px

或：

一个<percentage>值；例如100%

number值无效。该值采用字符串形式，因此您的代码应将'px'附加到计算得出的数字上：

this.imageHeight = this.$refs["desktop-image"].offsetHeight + 80 + 'px';

demo

vuetify v-bind内联样式值未更新

1 个答案: