用vue在页面应用动态组件实现： 页面展示“待办事项”和“已完成事项”按钮 点击“待办事项”按钮切换到待办事项列表 点击“已完成事项”按钮切换到已完成事项列表 “待办事项”列表页和“已完成事项”列表页以列表的形式展示所有事项信息，包含事项的标题（title)和状态(status） 使用transition组件实现两个组件切换时的过渡效果

首先，需要定义两个组件，分别是待办事项组件和已完成事项组件。

待办事项组件：

<template>
  <div class="todo-list">
    <h2>待办事项</h2>
    <ul>
      <li v-for="item in todoList" :key="item.id">
        {{ item.title }} - {{ item.status }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todoList: [
        { id: 1, title: '任务1', status: '未完成' },
        { id: 2, title: '任务2', status: '未完成' },
        { id: 3, title: '任务3', status: '未完成' },
      ],
    };
  },
};
</script>

<style scoped>
.todo-list {
  transition: opacity 0.5s;
}
</style>

已完成事项组件：

<template>
  <div class="done-list">
    <h2>已完成事项</h2>
    <ul>
      <li v-for="item in doneList" :key="item.id">
        {{ item.title }} - {{ item.status }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      doneList: [
        { id: 4, title: '任务4', status: '已完成' },
        { id: 5, title: '任务5', status: '已完成' },
        { id: 6, title: '任务6', status: '已完成' },
      ],
    };
  },
};
</script>

<style scoped>
.done-list {
  transition: opacity 0.5s;
}
</style>

然后，在父组件中使用动态组件来切换待办事项和已完成事项组件，并在按钮上绑定点击事件来触发组件的切换。同时使用transition组件来实现切换时的过渡效果。

<template>
  <div>
    <div>
      <button @click="showTodoList">待办事项</button>
      <button @click="showDoneList">已完成事项</button>
    </div>
    <transition name="fade">
      <component :is="currentComponent"></component>
    </transition>
  </div>
</template>

<script>
import TodoList from './TodoList.vue';
import DoneList from './DoneList.vue';

export default {
  components: {
    TodoList,
    DoneList,
  },
  data() {
    return {
      currentComponent: 'TodoList',
    };
  },
  methods: {
    showTodoList() {
      this.currentComponent = 'TodoList';
    },
    showDoneList() {
      this.currentComponent = 'DoneList';
    },
  },
};
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

这样，就完成了待办事项和已完成事项列表的切换，并使用transition组件实现了切换时的过渡效果。