vue，初步实现todolist

利用vue初步实现todolist，若有不足请多多指教

html代码：

		<div id="app">
			<header>
				<div class="body-1">
					<div class="title-1">
						<h2>ToDolist</h2>
					</div>
					<div class="title-2">
						<form>
							<input id="inp" v-model="value" type="text" @keydown.enter.prevent="addOffice"
								 placeholder="添加DoTo" />
						</form>

					</div>
				</div>
			</header>
			<div class="body">
				<div class="body-1">
					<div class="head">
						<div class="title-1">
							<h2>正在进行</h2>
						</div>
						<div class="title-2">
							<div class="yuan">
								<p>{{goingIndex}}</p>
							</div>
						</div>
					</div>
					<div class="body-2">
						<ol>
							<li v-for="item,index in goingArray">
								<div class="div">
									<input id="inp1" type="checkbox"  @click="remove(index,item)"/>
									<p>{{item}}</p>
									<button id="but" @click="deletes(index)">删除</button>
								</div>
							</li>
						</ol>
					</div>
				</div>
				<div class="body-1">
					<div class="head">
						<div class="title-1">
							<h2>已经完成</h2>
						</div>
						<div class="title-2">
							<div class="yuan">
								<p>{{finishIndex}}</p>
							</div>
						</div>
					</div>
					<div class="body-2">
						<ol>
							<li v-for="item,index in finishArray">
								<div class="div">
									<input id="inp1" type="checkbox" checked="checked" @click="add(index,item)" />
									<p>{{item}}</p>
									<button id="but" @click="delete1(index)">删除</button>
								</div>
							</li>
						</ol>
					</div>
				</div>
			</div>
		</div>

vue代码：

	<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data: {
					value: "",
					goingIndex: 0,
					goingArray: [],
					finishIndex: 0,
					finishArray: []
				},
				methods: {
					addOffice: function() {//添加事务
						if (this.value != "") {
							this.goingArray.push(this.value)
						}
						this.goingIndex++
						this.value = ""
					},
					
					remove:function(index,item){//将进行事务改为完成事务
						this.goingArray.splice(index, 1)
						this.finishArray.push(item)
						console.log(this.finishArray)
						this.goingIndex--
						this.finishIndex++
					},
					add:function(index,item){//将完成事务转换为进行事务
						this.finishArray.splice(index, 1)
						this.goingArray.push(item)
						this.finishIndex--
						this.goingIndex++
					},
					deletes:function(index){//删除进行事务
						this.goingArray.splice(index,1)
						this.goingIndex--
					},
					delete1:function(index){//删除完成事务
						this.finishArray.splice(index,1)
						this.finishIndex--
					}
				}
			})
		</script>

css代码：

* {
	margin: 0;
	padding: 0;
}
header {
	width: 100%;
	height: 50px;
	background-color: #323232;
	color: white;
}

body {
	background-color: #cdcdcd;
}

.body-1 {
	width: 600px;
	margin: 0 auto;
	padding-left:10px ;
}
.head{
	height: 50px;
}

.title-1 {
	width: 35%;	
	float: left;
	padding-left: 10px;
	padding-top: 10px;
}

.title-2 {
	width: 60%;
	float: right;
	padding-right: 10px;
	padding-top: 10px;
}
#inp{
	width: 100%;
}
input {
	height: 25px;
}

.yuan {
	background-color: #e6e6fa;
	float: right;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	text-align: center;
}
.div{
	height: 30px;
	background-color: white;
	display: flex;
	padding-top:5px;
	border-radius: 5px;
}
li{
	list-style: none;
	padding-left:10px;
	margin-bottom: 10px;
	
}
.div p{
	width: 80%;
}
.div input{
	width: 10%;
	height: 25px;padding-right:10px ;
}
.div button{
	height: 25px;
	padding-bottom: 5px;
}