Vue.js框架--双向数据绑定实现todolist（七）

主要操作技能：

1. MVVM :双向数据绑定: 复选框checked=true/false

2. 条件判断 v-if 复选框checked

3. 输入框中的键盘按下事件keydown=doAdd($event)

4. 用样式美化页面

要实现 http://www.todolist.cn这个效果！

编写代码:

<template>
	<div id="app">
		<!-- 键盘按下回车键添加数据哦！-->
		<input type="text" v-model="todo" @keydown="doAdd($event)" placeholder="添加todo.." />
		<!--<button @click="doAdd()">add</button>-->
		<hr /><br /><br />

		<h2>正在进行</h2>
		<ul class="first">
			<li v-for="(item,key) in list" v-if="!item.checked">
				<input type="checkbox" v-model="item.checked" /> {{item.title}}
				<!----<button @click="doDel(key)">del</button>-->
			</li>
		</ul>
		<br />

		<h2>已经完成</h2>
		<ul class="bg">
			<li v-for="(item,key) in list" v-if="item.checked">
				<input type="checkbox" v-model="item.checked" /> {{item.title}}
				<!----<button @click="doDel(key)">del</button>-->
			</li><br />
		</ul>
		<br />

		<!--使用v-if判断-->
		<!--<h1 v-if="ok">这是一个h1-YES</h1>
		<h1 v-if="!ok">这是一个h1-NO</h1>-->

	</div>
</template>

<script>
	export default {
		name: 'app',
		data() { //业务逻辑的数据
			return {
				ok: false, //标记true/false
				msg: 'hello',
				todo: '',
				//list: []
				list: [{
						title: '录制JAVA课程',
						checked: true

					}, {
						title: '录制HTML课程',
						checked: false

					}

				]
			}
		},
		methods: {
			doAdd(e) {
				//	this.list.push(this.todo);
				console.log(e.keyCode);

				//判断按回车键添加哦！
				if(e.keyCode == 13) {
					//在list数组中添加数据
					this.list.push({
						title: this.todo,
						checked: false
					});
				}
			},
			doDel(key) {
				this.list.splice(key, 1);
			}
		}
	}

	//模拟数据哦
	//['录制JAVA课程', '录制HTML课程']
	//	[{
	//			title: '录制JAVA课程',
	//			checked: true
	//
	//		}, {
	//			title: '录制HTML课程',
	//			checked: false
	//
	//		}
	//
	//	]
</script>

<style lang="scss">
	ul {
		list-style: none; //去掉小黑点
	}
	
	li { //边框,大小,外边距,行高
		border: 1px solid #eee;
		width: 350px;
		height: 30px;
		margin-top: 10px;
		line-height: 30px;
	}
	
	.bg li { //背景色2
		background: #eee;
	}
	
	.first li {//背景色1
		background: white;
	}
</style>

效果:

1）初始化页面

扫描二维码关注公众号，回复： 3175658 查看本文章

2）添加完后，按回车键

3）选择任意的选中

4）在完成中选择取消

Vue.js框架--双向数据绑定实现todolist（七）

猜你喜欢