vue2 js 点击按钮实现数组换一批功能

在 Vue2 中，点击按钮实现数组分批加载的功能通常涉及到以下几个步骤：

1. **数据初始化**：首先，在组件的 `data` 对象中定义一个数组，比如 `items`, 并初始化一些默认数据，假设初始只有几项。

data() {
  return {
    items: [], // 初始化空数组
    page: 0, // 当前页数
    pageSize: 10, // 每页显示的数量
  }
}

2. **按钮绑定事件**：在模板中给按钮添加一个 `@click` 事件处理器，这个处理器会触发获取新数据的函数，如 `loadMoreData`。

<button @click="loadMoreData">加载更多</button>

3. **分批加载函数**：创建一个名为 `loadMoreData` 的方法，检查当前是否还有更多的数据需要加载。如果还有，增加页码并请求新的数据，然后更新 `items` 数组。

methods: {
  loadMoreData() {
    if (this.page < Math.ceil(this.totalItems / this.pageSize)) { // 假设 totalItems 是总数据量
      this.page++;
      // 虚拟请求API或者模拟数据
      fetchNewData().then(newData => {
        this.items = [...this.items, ...newData];
      });
    } else {
      // 没有更多数据了，可以提示用户或停止加载
      alert('已达到最大分页');
    }
  },
}

4. **模拟数据**：这里可以用一个简单的数组或从服务器请求真实的 JSON 数据，然后处理返回结果。

5. **生命周期钩子**：如果数据是通过网络请求来的，可能还需要考虑在适当的时候进行加载，例如在 `created()` 或 `mounted()` 钩子中开始第一次加载。

注意：以上是一个基本的示例，并未涉及错误处理和性能优化。实际应用中，可能还需要处理各种异常情况以及使用分页插件或者Vuex管理状态等。