以下是一个使用Vue.js实现的数据列表的示例代码。初始状态下，只显示一个数据项。当点击”显示全部”按钮时，会展示全部数据，并添加加载效果。htmlCopy

<template>
  <div>
    <div v-for="item in visibleItems" :key="item.id">
      <!-- 显示数据项的内容 -->
      <p>{{ item.name }}</p>
      <p>{{ item.desc }}</p>
      <!-- 其他数据项的显示内容 -->
      <!-- ... -->

      <hr />
    </div>

    <button @click="showAll">显示全部</button>
    <div v-if="isLoading">加载中...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        // 数据数组
        // ...
        // 在这里添加你提供的数据列表
      ],
      visibleItems: [], // 可见的数据项
      isLoading: false, // 加载状态
    };
  },
  methods: {
    showAll() {
      this.isLoading = true; // 开始加载
      // 模拟异步加载数据，这里使用setTimeout来模拟实际的异步请求
      setTimeout(() => {
        this.visibleItems = this.items; // 显示所有数据项
        this.isLoading = false; // 加载完成
      }, 1000); // 延迟1秒模拟加载时间
    },
  },
};
</script>

在上述代码中，我们首先定义了一个数据数组items，其中包含了你提供的数据列表。初始状态下，我们将visibleItems数组设置为空，表示不显示任何数据项。当点击”显示全部”按钮时，我们将visibleItems设置为items，即展示全部数据项。

为了模拟加载效果，我们使用了一个布尔变量isLoading来表示加载状态。当点击”显示全部”按钮时，我们将isLoading设置为true，显示”加载中…”的提示信息。然后，通过setTimeout函数模拟了一个异步加载的过程。在实际应用中，你可以将异步请求替换为实际的数据加载逻辑。加载完成后，我们将visibleItems设置为items，显示所有数据项，并将isLoading设置为false，表示加载完成。

请注意，以上代码只提供了一个基本的示例，你可以根据实际需求进行修改和扩展。