这是我完成的样子
先上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
<div id="root" style="margin: 0;">
<h3>ToDoList</h3>
<h3 class="holder">请输入事项</h3> <input v-model="inputValue"> <button @click="click1">提交</button>
<ul style="list-style:none;margin: 0;">
<p align="left">未完成任务：</p>
<li v-for="(item1,index) in item1s">
<button @click="todo(item1)">完成事项</button>
<label class="tab1" style="width: 400px;">{{item1.text}}</label>
<button @click="delete1(item1)">删除</button>
</li>
<hr />
<p>已完成任务：</p>
<li v-for="(item2,index) of item2s">
<button @click="done(item2)" />恢复进行</button>
<label style="width: 200px;">{{item2.text}}</label>
<button @click="delete2(item2)">删除</button>
</li>
</ul>
<hr />
</div>
<script>
//创建vue实例
new Vue({
el: "#root",
data: {
item1s: [],
inputValue: '',
item2s: [],
},
methods: {
//添加任务
click1: function() {
this.item1s.push({
text: this.inputValue
});
this.inputValue = "";
},
//未完成任务变成已完成任务
todo: function(item1) {
//已完成任务列表增加 item1可以通过console看到结构
this.item2s.push({
text: item1.text
});
//从未完成任务列表移除
this.item1s.splice(this.item1s.indexOf(item1), 1)
},
//已完成任务变成未完成任务
done: function(item2) {
//未完成任务列表增加 item2可以通过console看到结构
this.item1s.push({
text: item2.text
});
//从已完成任务列表移除
this.item2s.splice(this.item2s.indexOf(item2), 1)
},
//删除未完成的任务
delete1: function(item1) {
this.item1s.splice(this.item1s.indexOf(item1), 1)
},
//删除已完成的任务
delete2: function(item2) {
this.item2s.splice(this.item2s.indexOf(item2), 1)
console.log(this.item2s.indexOf(item2));
}
}
})
</script>
<style>
ul,
input {
margin: 0;
padding: 0;
/* font-size: 100%; */
font-weight: normal;
vertical-align: baseline;
}
label{
width: 18.75rem;
}
</style>
</body>
</html>
知识点详解
<li v-for="(item1,index) in item1s">
v-for：遍历对象
–键是–{{key}}–值是–{{val}}
this.item1s.push({text: this.inputValue});
push：push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
1.一定是在数组的末尾添加
2.该方法会改变原数组的长度
3.如果需要在数组起始位置添加元素请使用 unshift() 方法
this.item1s.splice(this.item1s.indexOf(item1), 1)
splice：splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
用法：
arrayObject.splice(index,howmany,item1,…,itemX)
splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。