我这里用到是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>最终效果：
