vue3动态设置div 高度

在Vue 3中，可以使用`ref`来引用DOM元素，然后使用`$el`来访问DOM元素并设置其高度。

首先，在模板中使用`ref`指令给需要设置高度的`div`元素添加一个引用，例如：

<template>
  <div ref="myDiv">需要设置高度的div</div>
</template>

然后，在组件的`setup`函数中使用`ref`函数创建一个引用，例如：

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const myDiv = ref(null);

    onMounted(() => {
      // 在组件挂载后设置div的高度为500px
      myDiv.value.$el.style.height = '500px';
    });

    return {
      myDiv
    };
  }
}

在`setup`函数中，首先使用`ref`函数创建一个名为`myDiv`的引用。然后，使用`onMounted`函数在组件挂载后调用一个函数来设置`myDiv`引用对应的DOM元素的高度。

在该函数中，使用`myDiv.value.$el`来访问`myDiv`引用对应的DOM元素，并设置它的高度为`500px`。这样，就可以动态设置`div`元素的高度了。

相关问题

vue 动态设置div的高度_vue 动态设置title标题

1. Vue 动态设置 div 的高度：

可以使用 Vue 的计算属性和 style 绑定来动态设置 div 的高度。假设我们有一个 data 属性 height，代表 div 的高度，可以这样实现：

<template>
  <div :style="{height: divHeight}">Hello, world!</div>
</template>

<script>
export default {
  data() {
    return {
      height: 100 // 初始高度
    }
  },
  computed: {
    divHeight() {
      return this.height + 'px' // 拼接单位
    }
  }
}
</script>

当 height 属性改变时，div 的高度也会随之改变。

2. Vue 动态设置 title 标题：

可以使用 Vue 的生命周期函数 mounted，动态设置 document.title 属性。假设我们有一个 data 属性 title，代表标题，可以这样实现：

<template>
  <div>Hello, world!</div>
</template>

<script>
export default {
  data() {
    return {
      title: 'My App' // 初始标题
    }
  },
  mounted() {
    document.title = this.title
  }
}
</script>

当 title 属性改变时，标题也会随之改变。

vue使用$refs设置div高度

可以使用 `$refs` 来获取到DOM元素并设置它的高度，例如：

<template>
  <div ref="myDiv"></div>
</template>

<script>
export default {
  mounted() {
    this.$refs.myDiv.style.height = "200px";
  }
}
</script>

在 `mounted()` 钩子函数中，我们通过 `this.$refs` 来获取到 `myDiv` 元素，并通过 `style` 属性来设置它的高度为 `200px`。当然，你可以根据需要设置任何高度值。