<!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>todolist练习</title>
<link rel="stylesheet" href="./assets/bootstrap.css">
</head>
<body>
<div id="app" class="container">
<h1 class="my-3">todolist待办事项</h1>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="添加事件，记录每一天的努力！" v-model="todo" ref="input" v-on:keyup.enter="addItem">
<button class="btn btn-success" v-on:click="addItem">添加</button>
</div>
<table class="table">
<thead>
<tr>
<th scope="col">
<input type="checkbox" v-model="checkAll">
</th>
<th scope="col">#</th>
<th scope="col">待办事项</th>
<th scope="col">添加时间</th>
<th scope="col">是否完成</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,idx) in list" @click="selectItem(item.id)">
<th>
<input type="checkbox" v-model="item.checked">
</th>
<th >{
{idx+1}}</th>
<td>{
{item.todo}}</td>
<td>{
{formatDate(item.addtime)}}</td>
<td>{
{item.complete ? 'YES' : 'NO'}}</td>
<td>
<button class="btn btn-outline-success btn-sm" @click.stop="completeItem(item.id)">完成</button>
<button class="btn btn-outline-danger btn-sm" @click.stop="removeItem(item.id)">删除</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6">
总数:<span class="badge bg-primary">{
{list.length}}</span>
完成:<span class="badge bg-success">{
{completeList.length}}</span>
未完成:<span class="badge bg-danger">{
{unCompleteList.length}}</span>
</td>
</tr>
</tfoot>
</table>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
todo:"",
list:[{
id: 1,
todo: '赚他一个亿津巴布韦币',
complete: true,
checked:false,
addtime: Date.now() + 3600*1000
}, {
id: 2,
todo: '迎娶白富美，达到人生巅峰',
complete: false,
checked:false,
addtime: Date.now() + 3600 * 1000 * 5
},{
id: 3,
todo: '出任CEO，达到疯癫状态',
complete: false,
checked:false,
addtime: Date.now() + 3600 * 1000 * 10
}]
},
computed:{
completeList(){
console.log('completeList')
return this.list.filter(item=>item.complete)
},
unCompleteList(){
return this.list.filter(item=>!item.complete)
},
checkAll:{
get(){
return this.list.every(item=>item.checked)
},
set(newVal){
this.list.forEach(item=>item.checked=newVal)
}
}
},
methods:{
addItem(){
const newItem={
id:parseInt(Math.random()*100000),
todo:this.todo,
complete:false,
addtime:Date.now()
}
this.list.unshift(newItem)
this.todo=''
this.$refs.input.focus()
},
removeItem(id){
this.list=this.list.filter(item=>item.id!==id)
},
completeItem(id){
this.list.forEach(item=>{
if(item.id===id){
item.complete=!item.complete
}
})
},
formatDate(date){
console.log('formatDate')
return new Date(date).toLocaleDateString()
},
selectItem(id){
this.list.forEach(item=>{
if(item.id===id){
item.checked=!item.checked
}
})
}
}
})
</script>
</body>
</html>