<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue todolist - fxy</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">
<h3>ToDoList<input v-model="inputValue" v-on:keyup.enter="insert"/></h3>
<ul style="list-style:none;">
<p align="left">未完成任务：</p>
<li v-for="(item1,index) in item1s">
<input type="checkbox" @click="todo(item1)"/>
<label>{{item1.text}}</label>
<button @click="delete1(item1)">删除</button>
</li>
<p>已完成任务：</p>
<li v-for="(item2,index) of item2s">
<input type="checkbox" @click="done(item2)"/>
<label>{{item2.text}}</label>
<button @click="delete2(item2)">删除</button>
</li>
</ul>
</div>
<script>
//创建vue实例
new Vue({
el:"#root",
data:{
item1s:[],
inputValue:'',
item2s:[]
},
methods:{
//添加任务
insert: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)
}
}
})
</script>
</body>
</html>
3058
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
