效果如下:
实现代码:
HTML部分:
<div id="todo" class="todo">
<div class="header">
<section>
<!-- input部分 -->
<label for="title">ToDoList</label>
<input type="text" name="title" placeholder="请输入您的待办事项........." required="required" autocomplete="off"
v-model="title" v-on:keypress.enter="addTodo">
</section>
</div>
<section>
<!-- 上半部分 -->
<h2>上半部分<span id="todoCount" class="count">{{firstList.length}}</span></h2>
<ol id="todoList">
<li v-for="(item,index) in firstList">
<input type="checkbox" v-on:click.prevent="checkedTodo(index)" v-model="item.done">
<p>{{item.title}}</p>
<a href="###" v-on:click="deleteABtn1(index)">-</a>
</li>
</ol>
<!-- 下半部分 -->
<h2>下半部分<span id="doneCount" class="count">{{doneList.length}}</span></h2>
<ol id="doneList">
<li v-for="(item,index) in doneList">
<input type="checkbox" v-on:click.prevent="checkedDone(index)" v-model="item.done">
<p>{{item.title}}</p>
<a href="###" v-on:click="deleteABtn2(index)">-</a>
</li>
</ol>
</section>
<p class="footer">footer</p>
</div>
CSS部分:
* {
margin: 0;
padding: 0;
}
body {
font-size: 16px;
background: #cdcdcd;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.header {
height: 50px;
background: rgba(47, 47, 47, 0.98);
}
section {
max-width: 620px;
margin: 0 auto;
padding: 0 10px;
}
label {
float: left;
width: 100px;
line-height: 50px;
color: #ddd;
font-size: 24px;
cursor: pointer;
}
.header input {
float: right;
width: 60%;
height: 24px;
margin-top: 12px;
text-indent: 10px;
border-top-left-radius: 5px;
border-radius: 5px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
outline: none;
border: none;
}
h2 {
position: relative;
margin: 26px 0;
}
h2 .count {
position: absolute;
top: 2px;
right: 5px;
display: inline-block;
padding: 0 5px;
height: 20px;
border-radius: 20px;
background: #e6e6fa;
line-height: 22px;
text-align: center;
color: #666;
font-size: 14px;
}
ol {
margin: 28px 0 32px;
}
ol,
ul {
list-style-type: none;
}
li {
height: 32px;
line-height: 32px;
background: #fff;
position: relative;
margin-bottom: 10px;
padding: 0 48px;
border-radius: 3px;
border-left: 5px solid #629a9c;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}
li input {
position: absolute;
top: 6px;
left: 22px;
width: 22px;
height: 22px;
cursor: pointer;
}
li p {
line-height: 34px;
}
li a {
position: absolute;
top: 4px;
right: 5px;
display: inline-block;
width: 14px;
height: 12px;
border-radius: 14px;
border: 6px double #fff;
background: #ccc;
line-height: 12px;
text-align: center;
color: #fff;
font-weight: bold;
font-size: 14px;
cursor: pointer;
}
#doneList li {
border-left: 5px solid #999;
opacity: 0.5;
}
.footer {
font-size: 14px;
text-align: center;
color: #666;
}
@media only screen and (max-width: 400px){
.header input{
width: 52%;
}
}
script部分:
var todo = new Vue({
el: "#todo",
data: {
title: '',
// 设置firstList为空数组
firstList: [],
// 设置doneList为空数组用来存放到本地
doneList: [],
},
// 载入前:
beforeMount() {
// 加载localstorage
var storage = window.localStorage;
// 如果获取的todo不为空值时
if (storage.getItem("todo") !== null) {
// 从字符串中解析json对象,并获取数据todo
this.firstList = JSON.parse(storage.getItem("todo"));
}
if (storage.getItem("done") !== null) {
this.doneList = JSON.parse(storage.getItem("done"));
}
},
methods: {
// 当点击后触发
addTodo() {
// 如果input框里为空则跳出弹窗
if (this.title === '') {
return alert('您尚未输入需要存储的数据!!');
}
// 如果有东西那么 上半部分的span中的数值就会将获取到的新数据放在数组的第一个位置
this.firstList.unshift({
// 让input中的title进行绑定
title: this.title,
// 把done按钮设置为关闭状态
done: false
});
// 输入完毕后记得清空input框里的值
this.title = '';
// 把数据存储到本地
this.setLocalStorage();
},
// 当点击第一部分的删除按钮a时触发该事件
deleteABtn1(index) {
// 把存储过的值进行删除
this.firstList.splice(index, 1);
// 删除完毕后把剩下的存储到本地
this.setLocalStorage();
},
// 当点击第二部分的删除按钮a时触发事件
deleteABtn2(index) {
// 点击后可以删除对应的部分
this.doneList.splice(index, 1);
// 存储一下
this.setLocalStorage();
},
// 点击第一部分中的input时触发事件
checkedTodo(index) {
// span中的数字的索引的done就为true
// firstList.children[0].checked = 'checked'
this.firstList[index].done = true;
// 把firstList放在doneList的最前面
this.doneList.unshift(this.firstList[index]);
// 然后上半部分的span的索引也对应删除
this.firstList.splice(index, 1);
// 并进行存储
this.setLocalStorage();
},
// 当下半部分出现后的input框(也就是被勾选的框中) 对其设置点击事件
// 主要是实现点击后将复选框变为关闭状态,并且放在上半部分里,删除本身所在的位置
checkedDone(index) {
// 下半部分的span数字的索引done值设置为flase
this.doneList[index].done = false;
// 把下半部分放在上半部分大的最前面
this.firstList.unshift(this.doneList[index]);
// 下半部分的span点击后将删除当前的值
this.doneList.splice(index, 1);
this.setLocalStorage();
},
setLocalStorage() {
// 存储localstorage
var storage = window.localStorage;
// 将 JavaScript 值转换为 JSON 字符串
storage.setItem("todo", JSON.stringify(this.firstList));
storage.setItem("done", JSON.stringify(this.doneList));
}
}
});