06 Vue todolist 待办事项 已经完成 和进行中

为list数据添加状态，双向绑定、以及键盘回车事件

template:

<template>
	<div id="app">
		<input type="text" v-model="todo" @keydown="addData($event)" />
		<br>
		<hr>
		<h2>进行中</h2>
		<ul>
			<li v-for="(item,key) in list" v-if="!item.checked">
				<input type="checkbox" v-model="item.checked" />
				======{{item.title}}=======
				<button @click="removeData(key)">删除</button>
			</li>
		</ul>
		<h2>已完成</h2>
		<ul>
			<li v-for="(item,key) in list" v-if="item.checked">
				<input type="checkbox" v-model="item.checked" />
				======{{item.title}}=======
				<button @click="removeData(key)">删除</button>
			</li>
		</ul>
	</div>
</template>

js

<script>
export default {
  name: 'app',
  data () {
    return {
        todo: '',
		list: [
			{
				title: '录制node.js',
				checked: true
			},
			{
				title: '录制vue视频',
				checked: false
			}
		]
    }
  },
	methods:{
		addData(e) {
			console.log(e.keyCode);
			if(e.keyCode == 13) {
				//1.获取文本框输入的值   2.把文本框的值push到list里面
				this.list.push({
					title: this.todo,
					checked: false
				});
				//3.将文本框的值置为空
				this.todo = "";
			}
		},
		removeData(key) {
			// alert(key);
			//splice    js中操作数据的方法
			this.list.splice(key,1);
		}
	}
}
</script>

运行效果图：

进行回车添加list列表，选中复选框进心状态栏切换

完善代码，css样式美化，完整代码

template:

<template>
	<div id="app">
		<div class="header">
			<font>ToDoList</font>
			<input type="text" placeholder=" 添加ToDo" v-model="todo" @keydown="addData($event)" />
		</div>
		<div class="content">
			<h2>进行中</h2>
			<ul>
				<li v-for="(item,key) in list" v-if="!item.checked">
					<div class="list-box">
						<input class="checkbox" type="checkbox" v-model="item.checked" />
						<span class="title">{{item.title}}</span>
						<span class="delete"><img src="/src/image/delete.png" alt="" @click="removeData(key)"></span>
					</div>
				</li>

			</ul>
			<h2>已完成</h2>
			<ul>
				<li v-for="(item,key) in list" v-if="item.checked">
					<div class="list-box">
						<input class="checkbox" type="checkbox" v-model="item.checked" />
						<span class="title">{{item.title}}</span>
						<span class="delete"><img src="/src/image/delete.png" alt="" @click="removeData(key)"></span>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

js:

<script>
	export default {
		name: 'app',
		data() {
			return {
				todo: '',
				list: [{
						title: '录制node.js',
						checked: true
					},
					{
						title: '录制vue视频',
						checked: false
					}
				]
			}
		},
		methods: {
			addData(e) {
				console.log(e.keyCode);
				if (e.keyCode == 13) {
					//1.获取文本框输入的值   2.把文本框的值push到list里面
					this.list.push({
						title: this.todo,
						checked: false
					});
					//3.将文本框的值置为空
					this.todo = "";
				}


			},
			removeData(key) {
				// alert(key);
				//splice    js中操作数据的方法
				this.list.splice(key, 1);
			}
		}
	}
</script>

css:

<style lang="scss">
	#app {
		width: 100%;
		height: 1024px;
		background: #CCCCCC;
		text-align: center;
		margin: 0 auto;
	}

	.header {
		width: 100%;
		background: #333;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.header font {
		font-size: 6mm;
		color: white;
		vertical-align: middle;
		line-height: 20px;
	}

	.header input {
		width: 400px;
		height: 20px;
		vertical-align: middle;
		border: 2px solid #CCCCCC;
		border-radius: 5px;
		margin-left: 160px;
	}

	.content {
		width: 100%;
		margin-left: -18px;
	}

	.content h2 {
		font-family: '黑体';
		margin-right: 560px;
	}

	.content ul {
		list-style: none;
	}

	.content ul li {
		margin-top: 8px;
		margin-bottom: 8px;
	}

	.list-box {
		width: 670px;
		height: 30px;
		border-radius: 5px 0 0 5px;
		border-left: 5px solid seagreen;
		margin: 0 auto;
		background: white;
		margin-bottom: 8px;
	}

	.list-box img {
		width: 30px;
		height: 30px;
		line-height: 30px;
	}

	.list-box .title {
		float: left;
		line-height: 30px;
		margin-left: 10px;

	}

	.list-box .delete {
		float: right;
		margin-right: 10px;
	}

	.checkbox {
		width: 20px;
		height: 25px;
		float: left;
		margin-left: 10px;
	}
</style>

运行效果：