小黑记事本
![image-20210813212526810](https://i-blog.csdnimg.cn/blog_migrate/7d682fccbd88ca2b7aec29392b7816c7.png)
<template>
<div>
<!-- 主体区域 -->
<section id="todoapp">
<!-- 输入框 -->
<header class="header">
<h1>小黑记事本</h1>
<input v-model="addValue" @keyup.enter="listadd" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo">
</header>
<!-- 列表区域 -->
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item,index) in list" :key="index">
<div class="view">
<span class="index">{{index + 1 + "、"}}</span>
<label>{{item}}</label>
<button class="destory" @click="delelist(index)">删除</button>
</div>
</li>
</ul>
<ul class="todo-list"></ul>
</section>
<!-- 统计和清空 -->
<footer class="footer" v-show="list.length!=0">
<span class="todo-count">
<span>{{list.length}}items left</span>
<button class="todo-clear" @click="listdelete">clear</button>
</span>
</footer>
</section>
<!-- 底部 -->
<footer>
</footer>
<!-- <img src="../assets/logo.png" alt=""> -->
</div>
</template>
<script>
export default {
name:"App",
data () {
return {
list:[ "吃饭饭" ,"睡觉觉" ,"喝水水"],
addValue:"好好学习",
}
},
methods:{
listadd:function(){
this.list.push(this.addValue);
},
listdelete:function(){
this.list.splice(0,this.list.length)
},
delelist:function(index){
this.list.splice(index,1)
},
}
}
</script>
<style scoped>
*{
margin: 0 ;
padding: 0;
background-color: #f7f5f6;
}
.todo{
background-color: red !important;
width: 98%;
list-style: none;
line-height: 35px;
border-top:0.5px solid #E0E0E0;
border-bottom:0.5px solid #E0E0E0;
border-left:1px solid #E0E0E0;
border-right:1px solid #E0E0E0;
}
#todoapp{
width: 280px;
margin: 100px auto;
}
h1{
font-family:"隶书";
font-size: 32px;
color: saddlebrown;
text-align:center;
margin-bottom: 40px;
}
input::-webkit-input-placeholder {
color: #9C9C9C;
}
.new-todo{
outline: none;
width: 95%;
height: 35px;
border:1px solid #E0E0E0;
background-color: white;
padding:0 4px;
color: #9C9C9C;
font-size: 15px;
}
.view{
display: flex;
padding:0 4px;
color: #9C9C9C;
font-size: 15px;
background-color: white;
}
.index{
flex: 1;
background-color: white;
}
label{
flex: 10;
background-color: white;
}
.destroy{
flex: 1;
display: none;
color: red;
border: none;
background-color: white;
}
.view:hover .destroy{
display: block;
}
.image{
text-align: center;
}
.todo-count{
display: block;
width: 95%;
line-height: 20px;
color: #9C9C9C;
font-size: 10px;
padding:0 4px;
border:0.5px solid #E0E0E0;
background-color: white;
box-shadow:
0 0.0625px 0.1875em 0 rgb(0 0 0 / 16%),
0 0.5em 0 -0.25em #f2f2f2ed,
0 0.5em 0.1875em -0.25em rgba(0, 0, 0, 1),
0 1em 0 -0.5em #e5e5e5,
0 1em 0.1875em -0.5em rgba(0, 0, 0, 1);
}
strong{
background-color: white;
}
.todo-clear{
position: relative;
background-color: white;
color: #9C9C9C;
font-size: 10px;
top: -2px;
left: 176px;
border: none;
}
#heima{
text-align: center;
top: -2px;
left: 176px;
}
</style>