<!DOCTYPE html>
<html lang="zh-CN">
<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;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
#APP {
max-width: 600px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h2 {
margin-top: 0;
color: #333;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f9f9f9;
}
input[type="text"] {
padding: 5px;
width: 200px;
}
button {
padding: 5px 10px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
tbody tr:nth-child(odd) {
background-color: #f2f2f2;
}
.hover-content {
display: none; /* 初始状态隐藏 */
}
tr:hover .hover-content {
display: block;
}
</style>
</head>
<body>
<div id="APP">
<h2>懒人记事本</h2>
<table>
<header>
<tr>
<th><input type="text" placeholder="请输入任务名" v-model="rwname"></th>
<th><button @click="add">添加任务</button></th>
</tr>
</header>
<tbody>
<tr v-for="(item,index) in list" :key="item.id">
<td>{{index+1}}.{{item.name}}</td>
<td><button class="hover-content" @click="del(item.id)">X</button></td>
</tr>
<tr v-show="list.length>0">
<td><span>统计：{{list.length}}</span></td>
<td><button @click="list=[]">清空</button></td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const APP = new Vue({
el:'#APP',
data:{
rwname:'',
list:[
{id:1,name:'打篮球'},
{id:2,name:'做作业'},
{id:3,name:'玩游戏'}
]
},
methods:{
add(){
this.list.unshift({id:+new Date,name:this.rwname});
this.rwname=''
},
del(x){
this.list=this.list.filter(item=>item.id!=x)
}
}
})
</script>
</body>
</html>实现页面如下图：
