Vue3 开发 Todolist 教程
本文状态：未完成 一、产品原型 参考 Windows todo设计一个简单的移动端todo页面原型 二、开发教程 1、新建Todolist.vue 先通过脚手架配置好vue项目：@vue/cli 在项目src\views下面新建Todo.vue <template> <div class="todo"> <h1>Todolist</h1> <input type="text" v-model="content" @keypress="add"><button @click="add">Add</button> <p>{{content}}</p> <div class="section-title">待办</div> <ul class="todolist underway"> <TodoItem :="todo" v-for="todo in underway" :key="todo.id" :class="{done:todo.status}" v-model="todo.status" /> </ul> <div class="section-title">已完成</div> <ul class="todolist completed"> <TodoItem :="todo" v-for="todo in completed" :key="todo.id" :class="{done:todo.status}" v-model="todo.status" /> </ul> </div> </template> <script> import TodoItem from '../components/TodoItem'; export default { name: "Todo", components:{ TodoItem }, data(){ return{ content:'hello world!', checked:'', todos:[ { id:1, content:'这是内容1', status:false }, { id:2, content:'这是内容2', status:true }, { id:3, content:'这是内容3', status:true }, { id:4, content:'这是内容4', status:false }, { id:5, content:'这是内容5', status:true } ], } }, methods:{ add(){ this.todos.push({ id:this.todos.length+1, content:this.content, status:false }) } }, computed:{ underway(){ return this.todos.filter(todos=>!todos.status); }, completed(){ return this.todos.filter(todos=>todos.status); } } } </script> <style scoped> .section-title{font-weight: bold;font-size: 18px;} .todolist li{list-style: none;} .todolist li.done{text-decoration:line-through; } </style> 2、添加组件 <template> <li> <input type="checkbox" :name="id" :id="id" :value="content" :checked="modelValue" @input="onInput"/> <label :for="id">{{content}}</label> </li> </template> <script> export default { name: "TodoItem", data(){ return{ } }, props:{ id:Number, content:String, modelValue:Boolean }, methods:{ onInput(e){ this.$emit('update:modelValue',e.target.checked); } } } </script> <style scoped> </style> 2、添加路由 router\index.js中添加 ...