功能需求：
①列表渲染
②删除功能
③添加功能
④底部统计和清空
页面效果：
代码展示：
<!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>
