直接上代码：
<!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="./base/sui.css">
<style>
.btn-box{
display: flex;
justify-content: flex-end;
}
.btn-box button{
margin: 0 5px;
}
.card-unfinished-background{
background-color: rgba(101, 203, 243, 0.767);
}
.top{
margin: 0 15px;
}
.tabbar-box{
position: fixed;
height: 40px;
width: 100%;
left: 0;
bottom: 0;
display: flex;
justify-content: space-around;
}
.tabbar-box .circle{
width:40px;
height:40px;
border-radius: 50%;
}
.theme-primary.theme-fill{
background: blue;
color:#fff;
}
.theme-success.theme-fill{
background: green;
color:#fff;
}
.theme-danger.theme-fill{
background: red;
color:#fff;
}
.theme-primary{
border:1px solid blue;
color:blue;
}
.theme-success{
border:1px solid green;
color:green;
}
.theme-danger{
border:1px solid red;
color:red;
}
</style>
</head>
<body>
<div id="box">
<!-- header -->
<header class="bar bar-nav">
<a class="icon icon-left pull-left"></a>
<a class="icon icon-refresh pull-right"></a>
<h1 class="title">ToDoList</h1>
</header>
<!-- content -->
<div class="content">
<div class="content-block-title">Do</div>
<div class="top">
<!-- <div>
<p style="font-size:14px;">完成事件数:{{finishedNum}}</p>
<p style="font-size:14px;">未完成事件数:{{unFinishedNum}}</p>
<p>{{finishedCount}}</p>
</div> -->
<p>
<!-- 双向数据绑定 msg 按下回车时添加todo事件 -->
<input type="text" v-model="msg" @keyup.enter="addTodo()" placeholder="请输入要添加的事件">
</p>
</div>
<div class="card" v-for="todo in computedTodo" :class="{'card-unfinished-background':todo.isFinished}"> <!-- 遍历数据todos -->
<div class="card-content">
<div class="card-content-inner">
<p>{{todo.title}}</p> <!-- 数据data中 todos 的 title属性值 -->
<div class="btn-box">
<!-- 为按钮添加 class 当isFinished为true时才添加 单击时isFinished取反 -->
<button
:class="{'button-fill':todo.isFinished}"
class="button button-success"
@click="todo.isFinished=!todo.isFinished"
>
<span class="icon icon-check"></span>
</button>
<!-- 按钮单击事件 removeTodo 删除当前对应id的事件项-->
<!-- 按钮单击事件 checkTodo 检测当前id对应的事情是否完成-->
<button @click="checkTodo(todo.id,todo.isFinished)" class="button button-warning">
<span class="icon icon-remove"></span>
</button>
</div>
</div>
</div>
</div>
</div>
<!--device-start-->
<!-- v-if检测 isShow为true时显示确认框 为false隐藏-->
<!-- 点击 确定后 冒泡 isShow=false 隐藏确定框 -->
<div class="device-content" v-if="isShow" @click="isShow=false">
<div class="modal modal-in" style="display: block; margin-top: -72px;">
<div class="modal-inner">
<div class="modal-text">事件未完成是否删除</div>
</div>
<div class="modal-buttons " @click="removeTodo(prepareRemoveId)">
<span class="modal-button modal-button-bold" >确定</span>
</div>
</div>
<div class="modal-overlay modal-overlay-visible"></div>
</div>
<div class="tabbar-box" >
<!-- <button class="circle theme-primary">All</button>
<button class="circle theme-success">F</button>
<button class="circle theme-danger">Un</button> -->
<button
v-for="btn in btns"
class="circle"
:class="['theme-'+btn.theme,(type === btn.title ? 'theme-fill': '')]"
@click="type=btn.title"
>
{{btn.title}}
</button>
</div>
</div>
<script src="./base/vue.js"></script>
<script>
new Vue({
el:"#box",
data:{
type:"All",
btns:[//地段按钮数据
{id:1,title:"All",theme:"primary"},
{id:2,title:"F",theme:"success"},
{id:3,title:"Un",theme:"danger"},
],
todos:[
// {id:1,title:"打篮球",isFinished:false},
// {id:2,title:"写作业",isFinished:false}
],
isShow:false,
prepareRemoveId:"",
msg:"",
},
computed:{
computedTodo(){
switch(this.type){
case "All":return this.todos;
case "F":
return this.todos.filter(item=>{
return item.isFinished ?true:false
});//过滤完成的事件 isFinished为true保留 为false过滤
case "Un":
return this.todos.filter(item=>{
return item.isFinished ?false:true
})
}
}
},
methods:{
//添加事件
addTodo(){
let timeId = new Date().getTime()
this.todos.push({//按下回车后 todos 里添加新的对象
id:timeId,//时间戳当id
title:this.msg,//输入框传递来的msg值
isFinished:false//事件未完成
})
this.msg=""
},
//检测事件是否完成
checkTodo(id,isFinished){
if(!isFinished){//事件未完成
this.isShow=true//弹出确定框
this.prepareRemoveId = id //prepareRemoveId 保存 当前的id 用来确定删除
return
}else{
this.removeTodo(id)//完成删除对应id事件
}
},
removeTodo(id){
this.todos =this.todos.filter(item=>{//filter 过滤，当点击的对象对应的id 与 遍历的对象的id相等时 过滤出去。
if(item.id === id){
return false
}else{
return true
}
})
}
}
})
</script>
</body>
</html>
效果图：
