如何用vue实现工作清单

成品展现

 css样式

<style>
		*{margin: 0;padding: 0;}
			.item span {
				display: inline-block;
				width: 175px;
			}

			.slide-enter-active {
				transition: all ease 1s;
			}

			.slide-leave-active {
				transition: all ease 0.5s;
			}

			.slide-enter {
				opacity: 0;
				transform: translate(0, -25px);
			}

			.slide-enter-to {
				opacity: 1;
				transform: translate(0, 0);
			}

			.slide-leave {
				opacity: 1;
				transform: translate(0, 0);
				position: absolute;
			}

			.slide-leave-to {
				opacity: 0;
				position: absolute;
				transform: translate(100%, 0);
			}

			/* 正在位移的元素 */
			.slide-move {
				transition: all linear 0.5s;
			}
			#app{
				width: 100%;
				height:100vh;
				background-color: #cdcdcd;
			}
			.top{
				width: 100%;
				height: 53px;
				background-color: #323232;
				line-height: 53px;
				color: white;
				margin: auto;
			}
			.top1{
				width: 800px;
				margin: auto;
				font-size: 30px;
				display: flex;
				justify-content: space-between;
			}
			.top1 input{
				width: 366px;height: 30px;
				border-radius: 4px;
				border: 0px;
				margin: auto;
				box-shadow:0 0 8px 2px rgba(0,0,0,0.24) inset;
				
			}
			.list{
					width: 800px;
						margin: auto;
						line-height: 60px;
						text-align: center;
			}
			.xx{
				width: 30px;height: 30px;
			}
			.list span{
					font-size: 30px
			}
			.list button{
				font-size: 30px;
				width: 30px;height: 30px;
				border-radius: 50%;
				border: 0px;
			}
		</style>

 body样式（中间添加了vue简单动画效果）

<div id="app">
			<div class="top">
				<div class="top1">
					ToDoList
					<input placeholder=" 添加ToDo" type="text" @keyup.enter="addItem()" v-model="temp">
				</div>
			</div>
			<div class="list">
					<h1>未完成</h1>
				<transition-group name="slide" tag="div">
					<div class="item" v-for="item in dolist " :key="item.title">
						<input class="xx" type="checkbox" v-model="item.done">
					
						<span @dblclick="editTemp=item.title;item.state=1" v-show="item.state==0">{{item.title}}</span>
						
						<input type="text" v-model="editTemp" v-show="item.state==1"
							@keyup.enter="item.title=editTemp;item.state=0;" @blur="item.title=editTemp;item.state=0;"
							@keyup.esc="item.state=0;editTemp=item.title;" v-focus="item.state==1">
						<button @click="delItem(item)"></button>
					</div>
				</transition-group>
			</div>
			<div class="list"><h1>已经完成</h1>
				<transition-group name="slide" tag="div">
					<div class="item" v-for="item in undolist" :key="item.title">
						<!--  v-model="item.done" 指的是默认勾选 -->
						<input class="xx" type="checkbox" v-model="item.done" />
						<span @dblclick="editTemp=item.title;item.state=1" v-show="item.state==0">{{item.title}}</span>
						<input type="text" v-model="editTemp" v-show="item.state==1"
							@keyup.enter="item.title=editTemp;item.state=0;" @blur="item.title=editTemp;item.state=0;"
							@keyup.esc="item.state=0;editTemp=item.title;" v-focus="item.state==1">
						<button @click="delItem(item)" ></button>
					</div>
				</transition-group>
			</div>
		</div>

 js代码段

<script>
			new Vue({
				el: "#app",
				computed: {
					dolist() {
						return this.list.filter(item => !item.done);
					},

					undolist() {
						return this.list.filter(item => item.done);
					}
				},
				data: {
					list: [
						// title标题，done是否完成，state，0正常，1编辑
						{
							title: "学习html",
							done: true,
							state: 0
						},
						{
							title: "学习vue",
							done: false,
							state: 0
						},
					],
					editTemp: "", //修改的临时数据
					temp: "",
				},
				// 希望双击后出现的修改框能自动获取焦点
				// 1.找到这个节点 用 自定义指令
				directives: {
					"focus": {
						update(el, binding) {
							// el当前节点；binding.value指令的值
							// 如果指令的值为真让el获取焦点
							if (binding.value) {
								el.focus();
								el.select()
							}
						}
					}
				},
				methods: {
					//添加
					addItem() {
						this.list.unshift({
							title: this.temp,
							done: false,
							state: 0
						});
						this.temp = "";
					},
					// 删除
					delItem(item) {
						var ind = this.list.findIndex(value => value.title == item.title);
						this.list.splice(ind, 1)
					}
				},
				//交换内容
				editSure() {
					//当确定编辑的时候，让list第正在编辑的标题等于正在编辑的临时数据
					this.list[this.editIndex].title = this.editTemp;
					//清空编辑临时数据
					this.editTemp = "";

				},
				// 双击
				toEdit(title) {
					console.log(title);
					this.editTemp = title;
					this.editIndex = this.list.findIndex(item => item.title == title);
				},

				watch: {
					"list": {
						handler(nval) {
							localStorage.setItem("list", JSON.stringify(this.list))
						},
					},
					deep: true
				},
				computed: {
					dolist() {
						return this.list.filter(item => !item.done);

					},
					undolist() {
						return this.list.filter(item => item.done);
					}
				},
			})
		</script>