vue3 控制 div 滚动到最底部

在Vue3中，如果你想要控制一个`div`滚动到最底部，你可以使用原生JavaScript的方法来实现这个功能，Vue3提供了`ref`来引用DOM元素，你可以这样操作：

首先，在你的Vue模板中给需要滚动到底部的`div`设置一个`ref`属性：

<template>
  <div ref="myDiv" class="scrollable-div">
    <!-- 这里是你的内容 -->
  </div>
</template>

然后，在你的Vue组件的`setup`函数或者`mounted`生命周期钩子中，你可以获取到这个`div`的引用，并使用`scrollTo`方法来滚动到底部：

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

const myDiv = ref(null);

onMounted(() => {
  if (myDiv.value) {
    myDiv.value.scrollTop = myDiv.value.scrollHeight;
  }
});
</script>

在上面的代码中，`myDiv`是一个Vue的响应式引用，指向了模板中的`div`元素。在`mounted`钩子中，当DOM被渲染后，我们使用`myDiv.value`来获取DOM元素，并通过设置`scrollTop`属性为`scrollHeight`属性的值来实现滚动到底部的效果。`scrollHeight`会返回元素内容的总高度，而`scrollTop`是当前滚动条的垂直位置。