<html>
<head>
<meta charset="utf-8" />
<title>todolist</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h2>添加选项</h2>
<input type="text" v-model="todo" placeholder="添加选项" @keyup.enter="addTodo" />
<h2>正在进行---{{todolen}}</h2>
<ul>
<!-- 当done为false，表示正在进行的选项 -->
<li v-for="(item, index) in todolist" v-if="item.done==false" >
<!-- 当点击checkbox就把done设置为真，表示已经完成，因为在li中判断了done==false才显示，所以不会显示 -->
<input type="checkbox" @change="changeTodo(index, true)" />
<label>{{item.todo}} </label>
<a @click="deleteTodo(index, true)">点击删除我</a>
</li>
</ul>
<!--todolist是全部选项，减去正在进行中的选项，就是已经完成的选项长度 -->
<h2>已经完成<span>{{todolist.length - todolen}}</span></h2>
<ul>
<!-- 在进行中点击checkbox时，done被设置为true，就显示此选项 -->
<li v-for="(item, index) in todolist" v-if="item.done==true" >
<!-- 点击checkbox时，done被设置为false，就隐藏此选项，显示到正在进行中的选项中 -->
<input type="checkbox" @change="changeTodo(index, false)" />
<label>{{item.todo}} </label>
<a @click="deleteTodo(index, false)">点击删除我</a>
</li>
</ul>
</div>
<script type="application/javascript">
var app = new Vue({
el:"#app",
data:{
todo:"",
todolist:[],
todolen: 0
},
methods:{
addTodo:function(){
let todoObj = {
todo: this.todo,
done: false
}
this.todolist.push(todoObj)
this.todolen++,
this.todo = ""
},
changeTodo:function(index, done) {
if(done) {
this.todolen--
this.todolist[index].done = true
} else {
this.todolen++
this.todolist[index].done = false
}
},
deleteTodo:function(index, done){
if (done){
this.todolen --
}
<!-- 删除当前选项 -->
this.todolist.splice(index, 1)
}
}
})
</script>
</body>
</html>
网友评论