功能需求：
①列表渲染
②删除功能
③添加功能
④底部统计和清空
页面效果：
代码展示：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小黑记事本</title><style>body {font-family: Arial, sans-serif;}.header {background-color: #f2f2f2;padding: 20px;}.new-todo {padding: 10px;width: 300px;margin-right: 10px;}.add {padding: 10px 20px;background-color: #4CAF50;color: white;border: none;cursor: pointer;}.main {padding: 20px;}.todo-list {list-style-type: none;padding: 0;}.todo {background-color: #fff;border: 1px solid #ddd;padding: 10px;margin-bottom: 10px;position: relative;transition: background-color 0.3s ease;}.todo:hover {background-color: #f0f0f0;}.index {font-weight: bold;margin-right: 10px;}.destroy {background-color: transparent;border: none;cursor: pointer;color: red;font-size: 16px;position: absolute;top: 50%;right: 10px;transform: translateY(-50%);opacity: 1;transition: opacity 0.3s ease;}.footer {background-color: #f2f2f2;padding: 20px;text-align: center;}.todo-count {margin-right: 20px;}.clear-completed {padding: 10px 20px;background-color: #ff6347;color: white;border: none;cursor: pointer;}</style>
</head><body><!-- 主体区域 --><section id="app"><!-- 输入框 --><header class="header"><h1>小黑记事本</h1><input v-model="todoName" placeholder="请输入任务" class="new-todo" /><button class="add" @click="add">添加任务</button></header><!-- 列表区域 --><section class="main"><ul class="todo-list"><li class="todo" v-for="(item, index) in list" :key="item.id"><div class="view"><span class="index">{{ index + 1 }}.</span><label>{{item.name}}</label><button @click="del(item.id)" class="destroy">删除</button></div></li></ul></section><!-- 统计和清空 ->如果没有任务，底部隐藏掉 ->v-show--><footer class="footer" v-show="list.length>0"><!-- 统计 --><span class="todo-count">合计：<strong>{{list.length}}</strong></span><!-- 清空 --><button @click="clear" class="clear-completed">清空任务</button></footer></section><!-- 底部 --><script src="js/vue.js"></script><script>const app = new Vue({el: '#app',data: {todoName: '',list: [{ id: 1, name: '跑步一公里' },{ id: 2, name: '跳绳俩百次' },{ id: 3, name: '游泳一百米' },]},methods: {del(id) {this.list = this.list.filter(item => item.id !== id);},add() {if (this.todoName.trim() === '') {alert('请输入任务名称');return;}this.list.unshift({id: Date.now(),name: this.todoName});this.todoName = '';},clear() {this.list = [];}}});</script>
</body></html>