主要操作技能:
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)初始化页面
2)添加完后,按回车键
3)选择任意的选中
4)在完成中选择取消