我这里用到是Vue-cli3来构建项目。components文件夹用来存放vue组件,新建的vue组件 todolist.vue文件就是放在这里,根目录下的App.vue是根组件。
App.vue
<template>
<div id="app" >
<h1>TodoList</h1>
<todolist></todolist>
</div>
</template>
<style>
#app{
display: flex;
flex-direction: column;
justify-content: center;
width:40%;
margin:0 auto;
}
#app h1{
text-align: center;
background: rgb(247, 223, 223);
}
</style>
<script>
import todolist from "./components/todolist";
export default {
name: 'app',
components: {
todolist
}
}
</script>
todolist.vue
<template>
<div class="box">
<input type="text" v-model="todo" @keyup.enter="add"/>
<h3>Doing</h3>
<ul id="todoing">
<li v-for="(item,key) in list" v-if="!item.cheked">
<input type="checkbox" v-model="item.cheked" @click="changeChecked(key)">
{{item.title}}
<button @click="deleteItem(key)">delete</button>
</li>
</ul>
<h3>Done</h3>
<ul id="todone">
<li v-for="(item,key) in list" v-if="item.cheked">
<input type="checkbox" v-model="item.cheked" @click="changeChecked(key)">
{{item.title}}
<button @click="deleteItem(key)">delete</button>
</li>
</ul>
</div>
</template>
<style>
.box{
display: flex;
flex-direction: column;
justify-content: center;
}
.box ul li{
margin:10px 0;
border-radius: 8px;
}
#todoing li{
background: rgb(194, 240, 240);
}
#todone li{
background: rgb(205, 240, 194);
}
</style>
<script>
export default {
name:'todolist',
data(){
return {
todo:'',
list:[]
}
},
methods: {
//添加数据
add(e){
this.list.push({title:this.todo,cheked:false}); //添加数据同时添加数据的状态,用于表示事情的完成进度
this.todo="";//清空文本框
},
//删除数据
deleteItem(key){
this.list.splice(key,1);
},
//修改数据状态
changeChecked(key){
this.list[key].checked=!this.list[key].checked;
}
}
}
</script>
最终效果: