一、效果
二、功能介绍
1.输入框输入任务，按下回车键，添加任务至任务栏最后
2.鼠标移动到某项任务，后面出现叉号，即可删除任务
3.记事本最下方左边统计当前任务总数
4.记事本最下方右边clear实现清空任务 同时最底部一栏隐藏
三、代码（含样式）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1</title>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<script src="./bootstrap/js/jquery.js"></script>
<script src="./bootstrap/js/popper.min.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
<style>
*{
padding-left: 0;
margin:0;
list-style: none;
}
body{
background-color: #eee;
}
header,footer{
text-align: center;
height: 60px;
}
h2{
color:rgba(238, 7, 7, 0.842);
font-weight: 400;
line-height: 60px;
}
section{
width:90%;
margin:0 auto;
background-color: #fff;
box-shadow: 5px 5px 3px #ccc;
border-radius: 0 0 3% 3%;
}
.title{
border-bottom: 1px solid #ccc;
}
input{
width:100%;
border:none;
height: 40px;
padding:5px 20px;
box-sizing: border-box;
font-size: 20px;
color:#333;
}
.items{
width:100%;
}
.items ul{
width:100%;
}
li{
width:100%;
box-sizing: border-box;
padding-left: 0;
padding:10px 10px;
border-bottom: 1px solid #ccc;
color:#666;
position: relative;
}
.order{
padding: 0 10px;
}
.delete{
position: absolute;
right:10px;
top:10px;
display: none;
font-size: 24px;
cursor: pointer; /*鼠标删除小手*/
}
.items li:hover .delete{
display: block;
}
.tongji{
overflow: hidden;
height: 40px;
line-height: 40px;
font-size: 14px;
color:darkturquoise;
}
.left{
float: left;
margin-left: 20px;
font-style: italic;
}
.left span{
margin-right: 10px;
}
.clear{
float: right;
margin-right: 20px;
cursor: pointer; /*鼠标删除小手*/
}
</style>
</head>
<body>
<header>
<h2>小黑记事本</h2>
</header>
<section id="app">
<div class="title">
<input type="text" placeholder="请输入待做事项" v-model.trim="msg" @keyup.enter="add" autocomplete="off">
</div>
<div class="items">
<ul type="1">
<li v-for="(item,index) in items">
<span class="order">{{index+1}}.</span>{{item}} <span class="delete" @click="remove(index)">x</span>
</li>
</ul>
</div>
<div class="tongji" v-show="items.length!=0">
<div class="left"><span>{{items.length}}</span>items left</div>
<div class="clear"><span @click="clear">Clear</span></div>
</div>
</section>
<script src="./js/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
msg:"",
items:["web应用开发","UI动效设计","手机微电影制作"]
},
methods:{
add:function(){
if(this.msg!="")
{
this.items.push(this.msg);
this.msg="";
}
},
remove:function(index){
// console.log("删除");
// console.log(index);
this.items.splice(index,1);
},
clear:function(){
this.items=[];
}
}
});
</script>
</body>
</html>