vue2计算盒子的高度

Vue2中计算盒子高度的方法主要有两种：
1. 使用ref获取dom元素，通过clientHeight或offsetHeight属性获取盒子高度，如下所示：

<template>
  <div ref="box"></div>
</template>
<script>
export default {
  mounted() {
    const boxHeight = this.$refs.box.clientHeight;
  }
}
</script>

2. 使用computed属性计算盒子高度。先定义一个data属性保存内容高度，然后使用计算属性根据内容高度动态计算盒子高度，如下所示：

<template>
  <div :style="{ height: boxHeight }"></div>
</template>
<script>
export default {
  data() {
    return {
      contentHeight: 200
    }
  },
  computed: {
    boxHeight() {
      return this.contentHeight + 'px';
    }
  }
}
</script>

希望能对你有所帮助！

相关问题

vue3项目 怎么获取页面 div的高度 4个盒子的高度总和，给外边的父盒子

你可以使用 Vue 3 中的 ref 和 reactive 来获取页面 div 的高度。首先，在 Vue 组件中，通过 ref 创建一个对应的引用变量来获取 div 元素的引用。然后，使用 reactive 创建一个响应式对象来保存盒子的高度总和。接下来，可以通过监听 div 元素的变化来更新盒子的高度总和，并将其赋值给父盒子。

以下是一个示例代码：

<template>
  <div>
    <div ref="box1">...</div>
    <div ref="box2">...</div>
    <div ref="box3">...</div>
    <div ref="box4">...</div>
    <div ref="parentBox" :style="{ height: boxHeight + 'px' }">...</div>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue';

export default {
  setup() {
    const box1 = ref(null);
    const box2 = ref(null);
    const box3 = ref(null);
    const box4 = ref(null);
    const parentBox = ref(null);

    const boxHeight = reactive({
      totalHeight: 0,
    });

    const updateBoxHeight = () => {
      const height1 = box1.value.offsetHeight;
      const height2 = box2.value.offsetHeight;
      const height3 = box3.value.offsetHeight;
      const height4 = box4.value.offsetHeight;
      boxHeight.totalHeight = height1 + height2 + height3 + height4;
    };

    onMounted(() => {
      updateBoxHeight();
      window.addEventListener('resize', updateBoxHeight);
    });

    return {
      box1,
      box2,
      box3,
      box4,
      parentBox,
      boxHeight,
    };
  },
};
</script>

在上面的示例代码中，通过 ref 创建了 `box1`、`box2`、`box3`、`box4` 和 `parentBox` 引用变量，分别对应页面中的四个盒子和父盒子。使用 reactive 创建了一个响应式对象 `boxHeight` 来保存盒子的高度总和。在 `updateBoxHeight` 函数中，通过获取每个盒子的 `offsetHeight` 来计算盒子的高度总和，并将其赋值给 `boxHeight.totalHeight`。在组件的 `setup` 钩子函数中，通过监听窗口的 resize 事件来更新盒子的高度总和。

最后，在父盒子上使用 `:style="{ height: boxHeight + 'px' }"` 来绑定父盒子的高度，实现将盒子的高度总和赋值给父盒子的效果。

vue2.0版本 点击盒子循环改变大小和颜色

可以使用Vue的模板语法、绑定事件和计算属性来实现这个需求。具体实现代码如下：

<template>
  <div
    :style="{ backgroundColor: boxColor, width: boxWidth + 'px', height: boxHeight + 'px' }"
    @click="handleClick"
  ></div>
</template>

<script>
export default {
  data() {
    return {
      boxColor: 'blue', // 盒子颜色
      boxWidth: 200, // 盒子宽度
      boxHeight: 200 // 盒子高度
    }
  },
  methods: {
    handleClick() {
      this.boxColor = this.getRandomColor()
      this.boxWidth = this.getRandomSize()
      this.boxHeight = this.getRandomSize()
    },
    getRandomColor() { // 生成随机颜色的方法
      const colors = ['red', 'green', 'yellow', 'pink', 'purple', 'orange']
      return colors[Math.floor(Math.random() * colors.length)]
    },
    getRandomSize() { // 生成随机尺寸的方法
      return Math.floor(Math.random() * 200 + 100)
    }
  },
  computed: {
    boxStyle() {
      return {
        backgroundColor: this.boxColor,
        width: this.boxWidth + 'px',
        height: this.boxHeight + 'px'
      }
    }
  }
}
</script>

这段代码中，我们使用Vue的模板语法，将盒子的样式绑定到了组件的data中定义的属性上，同时使用@click绑定了盒子的点击事件，点击时会调用组件中的handleClick方法，实现了盒子变换颜色和尺寸的效果。我们也可以使用计算属性boxStyle来简化模板中的样式绑定。这样，每次点击盒子时，都会改变盒子的颜色和尺寸，实现了循环的效果。