用vue3来实现记事本，要求列表渲染，删除功能，添加功能，底部合计和清除任务，提供vue3和html代码

在Vue3中实现一个基本的记事本应用，我们可以创建一个组件，它包含一个数组来存储待办事项，以及增删改查的功能。这里是一个简单的示例，包括HTML模板、Vue3的script部分和一些关键的数据和方法：

<template>
  <div class="note-app">
    <h2>待办事项</h2>
    <input v-model="newTask" placeholder="添加新任务" @keyup.enter="addTask">
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        {{ task }}
        <button @click="deleteTask(index)">删除</button>
      </li>
    </ul>
    <p>总计：{{ totalTasks }}</p>
    <button @click="clearTodos">清除所有任务</button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const newTask = ref('');
const tasks = ref([]);
let totalTasks = 0;

function addTask() {
  if (newTask.value.trim()) {
    tasks.push(newTask.value);
    totalTasks++;
    newTask.value = '';
  }
}

function deleteTask(index) {
  tasks.splice(index, 1);
  totalTasks--;
}

function clearTodos() {
  tasks.length = 0;
  totalTasks = 0;
}
</script>

<style scoped>
.note-app {
  padding: 1rem;
}
</style>

在这个例子中：
- `v-model`用于双向数据绑定输入框的内容到`newTask`变量。
- `v-for`循环遍历`tasks`数组，渲染每个任务，并提供删除按钮，点击时通过`deleteTask`函数从数组中移除对应的任务。
- `totalTasks`计算属性基于`tasks`长度，每当任务增加或删除后自动更新。
- 底部有一个清除按钮，点击时清空`tasks`数组并设置`totalTasks`为0。