如果要添加一个统计展示组件Footer.vue，请思考如何补充完现有代码，实现效果如下

要添加一个统计展示组件 Footer.vue，可以按照以下步骤进行操作：

1. 在 src/components 目录下创建一个名为 Footer.vue 的文件，编写统计展示组件的模板和样式，例如：

<template>
  <div class="footer">
    <span>已完成 {{ doneCount }} 项</span>
    <span>未完成 {{ undoneCount }} 项</span>
  </div>
</template>

<style>
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f0f0f0;
}
</style>

2. 在 App.vue 中导入 Footer 组件，并在模板中使用它，例如：

<template>
  <div>
    <h1>Todo List</h1>
    <input v-model="inputValue" @keyup.enter="handleAddItem"/>
    <ul>
      <li v-for="(item, index) in todoList" :key="index">
        <span :class="{ 'done': item.done }" @click="handleToggleDone(index)">{{ item.content }}</span>
        <button @click="handleDeleteItem(index)">删除</button>
      </li>
    </ul>
    <footer-component :done-count="doneCount" :undone-count="undoneCount"></footer-component>
  </div>
</template>

<script>
import Footer from './components/Footer.vue'

export default {
  components: {
    'footer-component': Footer
  },
  data() {
    return {
      todoList: [
        { content: '学习 Vue.js', done: true },
        { content: '学习 React', done: false },
        { content: '学习 Angular', done: false }
      ],
      inputValue: ''
    }
  },
  computed: {
    doneCount() {
      return this.todoList.filter(item => item.done).length
    },
    undoneCount() {
      return this.todoList.filter(item => !item.done).length
    }
  },
  methods: {
    handleAddItem() {
      if (this.inputValue.trim() === '') return
      this.todoList.push({ content: this.inputValue, done: false })
      this.inputValue = ''
    },
    handleToggleDone(index) {
      this.todoList[index].done = !this.todoList[index].done
    },
    handleDeleteItem(index) {
      this.todoList.splice(index, 1)
    }
  }
}
</script>

3. 在 Footer.vue 中定义 props 接收父组件传递的数据，例如：

export default {
  props: {
    doneCount: {
      type: Number,
      required: true
    },
    undoneCount: {
      type: Number,
      required: true
    }
  }
}

4. 在 Footer.vue 中使用 props 中接收的数据，例如：

<template>
  <div class="footer">
    <span>已完成 {{ doneCount }} 项</span>
    <span>未完成 {{ undoneCount }} 项</span>
  </div>
</template>

这样就完成了添加统计展示组件 Footer.vue 的操作。在 App.vue 中使用 footer-component 标签即可展示 Footer.vue 组件的内容。