vue.js设置元素高度

<template>
  <div :style="{ height: '200px' }">
    这个div的高度被设置为200像素。
  </div>
</template>

<template>
  <div :style="divStyle">
    这个div的高度会根据内容动态变化。
  </div>
</template>

<script>
export default {
  data() {
    return {
      contentHeight: 100 // 假设这是内容的高度
    };
  },
  computed: {
    divStyle() {
      return {
        height: `${this.contentHeight}px`
      };
    }
  }
};
</script>

<template>
  <div class="dynamic-height">
    这个div的高度是其父元素高度的50%。
  </div>
</template>

<style>
.dynamic-height {
  height: 50%;
}
</style>

<template>
  <div :style="divStyle">
    这个div的高度会根据内容动态变化。
  </div>
</template>

<script>
export default {
  data() {
    return {
      contentHeight: 100
    };
  },
  computed: {
    divStyle() {
      return {
        height: `${this.contentHeight}px`
      };
    }
  },
  methods: {
    updateHeight(newHeight) {
      this.contentHeight = newHeight;
    }
  }
};
</script>