Example Analysis of TodoList in Vue

Editor to share with you the example analysis of TodoList in Vue, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Import Top from'. / components/Top.vue' import Bottom from'. / components/Bottom.vue' import List from'. / components/List.vue' export default {name: 'App', components: {Top, List, Bottom}, data () {return {todos: [{id:' 001 dinner, title: 'dinner' Done: true}, {id: '002', title: 'sleep', done: false}, {id: '003', title: 'hit Doudou', done: false},]}} Methods: {/ / add a todo received (todoObj) {this.todos.unshift (todoObj) }, / / uncheck todo checkTodo (id) {this.todos.forEach ((todo) = > {/ / function body if (todo.id = id) todo.done =! todo.done })}, / / delete deleteTodo (id) {this.todos = this.todos.filter (todo = > todo.id! = = id)}, / / deselect all checkAllTodo (done) {this.todos.forEach ((todo) = > {todo.done = done})})} / / clear all completed data clearAllTodo () {this.todos = this.todos.filter ((todo) = > {return! todo.done})} / * base*/ body {background: # fff } .btn {display: inline-block; padding: 4px 12px; margin-bottom: 0; font-size: 14px; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; box-shadow: inset 0 1px 0 rgba (255,255,255,0.2), 0 1px 2px rgba (0,0,0,0.05); border-radius: 4px;} .btn-danger {color: # fff Background-color: # da4f49; border: 1px solid # bd362f;}. Btn-danger:hover {color: # fff; background-color: # bd362f;} .btn: focus {outline: none;}. Todo-container {width: 600px; margin: 0 auto;}. Todo-container. Todo-wrap {padding: 10px; border: 1px solid # ddd; border-radius: 5px } these are all the contents of the article "sample Analysis of TodoList in Vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!