![](https://img-blog.csdnimg.cn/direct/7c7281ae9ac648caa34ccc50d74a8f5d.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./记事本.css">
</head>
<body>
<div id="app">
<h1>小胡记事本</h1>
<div class="content">
<div class="input">
<input type="text" placeholder="请输入任务" v-model="todo" @keyup.enter="add">
<button @click="add">添加任务</button>
</div>
<ul>
<li v-for="(item, index) in list">
<div class="task">
<span>{{ index + 1 }}.</span>
<span>{{ item.content }}</span>
</div>
<span class="close" @click="del(item.id)">❌</span>
</li>
</ul>
<footer v-show="list.length>0">
<div class="total">
合计:{{list.length}}
</div>
<div class="hent" @click="list=''">
清空任务
</div>
</footer>
</div>
</div>
<!-- 引入的是开发版本包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
// 通过el配置选择器,指定vue管理的是哪个盒子
el: '#app',
// 通过data提供数据
data: {
list: [
{ id: 1, content: '学习三小时' },
{ id: 2, content: '学习二小时' },
{ id: 3, content: '学习一小时' }
],
// 跟input表单双向绑定,获取输入框中的值
todo: ''
},
methods: {
add() {
if (this.todo.trim() === '') {
alert('请输入任务名称')
return
}
this.list.unshift({
id: + new Date(),
content: this.todo
})
this.todo = ''
},
del(id) {
this.list = this.list.filter(item => item.id !== id)
}
}
})
</script>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
input {
border: none;
outline: none;
}
button {
border: none;
}
#app {
display: flex;
flex-direction: column;
align-items: center;
width: 400px;
// background-color: pink;
margin: 50px auto;
h1 {
margin-bottom: 20px;
}
.content {
display: flex;
flex-direction: column;
width: 100%;
padding: 5px 50px;
background-color: rgb(135, 235, 200);
.input {
display: flex;
align-items: center;
width: 300px;
height: 40px;
border: 2px solid rgb(203, 105, 105);
border-radius: 4px;
overflow: hidden;
input {
width: 70%;
height: 100%;
padding-left: 1rem;
}
button {
width: 31%;
height: 100%;
background-color: rgb(203, 105, 105);
color: #fff;
}
}
ul {
li {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px dashed #666;
.close {
cursor: pointer;
display: none;
}
&:hover>.close {
display: inline-block;
}
}
}
footer {
display: flex;
justify-content: space-between;
margin-top: 10px;
color: #666;
.hent {
cursor: pointer;
}
}
}
}