vue点击按钮滑到底部

在Vue.js中，要实现点击按钮滚动到页面底部的功能，通常会结合`v-ref`属性、`ref`引用以及JavaScript操作DOM来完成。以下是一个简单的示例：

1. 首先，在HTML中创建一个按钮，并给它一个`@click`事件监听器，比如绑定一个名为`scrollToBottom`的函数。

<button @click="scrollToBottom">滚动到底部</button>

2. 然后，在对应的Vue组件的script部分，定义这个`scrollToBottom`方法。在这个方法里，你可以获取包含内容的元素，如`.vue`文件中的`<div id="app">...</div>`，并设置它的`scrollTop`属性为最大值，使其滚动到底部。

export default {
  methods: {
    scrollToBottom() {
      const appRef = this.$refs.app; // 使用v-ref获取元素
      if (appRef) { // 检查ref是否存在
        appRef.scrollTop = appRef.scrollHeight; // 设置滚动位置到最大高度
      }
    },
  },
}

确保在需要滚动的容器上设置了`v-ref`，例如：

<div id="app" v-ref="app">
  <!-- 页面内容 -->
</div>