文本框中輸入計劃點擊添加，增加內容到正在進行，正在進行中check後移動至已完成，已完成的工作可以返回正在進行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="app">
<div class="header">
<div class="container">
<div class="logo">toDoList</div>
<div class="input-area">
<input type = "text" @input = "handleInput" :value = "curMask"/>
<button @click = "addMask">添加</button>
</div>
</div>
</div>
<div class="container">
<h2>
<span>正在進行</span>
<span class="mask-num">{{ needDoList.length }}</span>
</h2>
<ul class="mask-list">
<li
v-for = "(mask,index) in needDoList"
:key = "mask.id"
>
<div>
<input type="checkbox" @change = "doCheck(index,'need')"/>
<span>{{ mask.title }}</span>
</div>
<button @click = "deleteMask(index,'need')">刪除</button>
</li>
</ul>
</div>
<div class="container">
<h2>
<span>已經完成</span>
<span class="mask-num">{{ completeList.length }}</span>
</h2>
<ul class="mask-list complete-list">
<li
v-for = "mask in completeList"
:key = "mask.id"
>
<div>
<input type="checkbox" @change = "doCheck(index,'complete')" />
<span>{{ mask.title }}</span>
</div>
<button @click = "deleteMask(index,'complete')">刪除</button>
</li>
</ul>
</div>
</div>
<script>
const vm = new Vue({
el:'.app',
data:{
curMask:'',
needDoList:[
],
completeList:[]
},
methods:{
handleInput(e){
this.curMask = e.target.value;
},
addMask(){
if(this.curMask === ""){return};
this.needDoList.push({
title:this.curMask,
id:Math.random(), });
this.curMask = "";
},
doCheck(index,type){
if (type === 'need') {
const completeMask = this.needDoList.splice(index,1);
this.completeList.push(...completeMask);
}else{
const noCompleteMask = this.completeList.splice(index,1);
this.needDoList.push(...noCompleteMask);
}
},
deleteMask(index,type){
// this.needDoList.splice(index,1);
const toDoList = type === 'need' ? this.needDoList : this.completeList;
toDoList.splice(index,1)
}
}
})
</script>
</body>
</html>
* {
padding: 0;
margin: 0;
list-style: none;
}
h2 {
display: flex;
align-items: center;
justify-content: space-between;
margin: 10px 0;
}
h2 .mask-num {
height: 20px;
padding: 0 5px;
border-radius: 20px;
background-color: #e6e6fa;
color: #666;
font-size: 14px;
}
body {
background-color: #cdcdcd;
}
.container {
width: 600px;
margin: 0 auto;
padding: 0 10px;
}
.header {
height: 50px;
background-color: #333;
}
.header .container {
display: flex;
align-items: center;
justify-content: space-between;
}
.header .container .logo {
width: 100px;
line-height: 50px;
color: #ddd;
font-size: 24px;
cursor: pointer;
}
.header .container .input-area {
width: 60%;
}
.header .container .input-area input {
width: 80%;
height: 24px;
text-indent: 10px;
border-radius: 5px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
border: none;
outline: none;
}
.header .container .input-area button {
width: 15%;
height: 24px;
vertical-align: center;
}
.mask-list li {
display: flex;
align-items: center;
justify-content: space-between;
height: 32px;
line-height: 32px;
margin-bottom: 10px;
padding: 0 15px;
border-radius: 3px;
border-left: 5px solid #629A9C;
background-color: #fff;
}
.mask-list.complete-list li {
border-left-color: #999;
opacity: .5;
}