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

左手的ㄟ右手 2024-02-18 23:26 136阅读 0赞

**主要操作技能：**

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

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

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

4. 用样式美化页面

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

![70][]

**编写代码:**

<template>
    	<div id="app">
    		
    		<input type="text" v-model="todo" @keydown="doAdd($event)" placeholder="添加todo.." />
    		
    		<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}}
    				
    			</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}}
    				
    			</li><br />
    		</ul>
    		<br />
    
    		
    		
    
    	</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）初始化页面

![70 1][]

2）添加完后，按回车键

![70 2][]

3）选择任意的选中

![70 3][]

4）在完成中选择取消

![70 4][]

[70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/c714302283a14321ab0ed9b2147c39bc.png
[70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/15fa04bc7c9242ad9934c36ed21da50c.png
[70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/4ec4543107c846a9b0880cc11cd965cd.png
[70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/c897df86b7c24989a672192bfd84a6ba.png
[70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/bacd3c7db8f74dd49d9e4b5f52213af9.png