How to realize the function of simple notepad with Vue
This article mainly explains "Vue how to achieve simple notepad function", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "Vue how to achieve simple notepad function" bar!
Preview picture:
The functions are as follows:
(1) enter a task and press enter to add a task to the task list (no repetitive tasks are allowed)
(2) Click Delete to delete the corresponding task
(3) Click clear, and all tasks will be deleted
(4) display the total number of tasks synchronously in the lower left corner
The complete code is as follows:
Notepad * {margin: 0; padding: 0;} # todoapp {width: 600px; background-color: rgba (19,161,114,0.63); font-family: sans-serif;} .header > H2 {padding: 20px 0; text-align: center Font-size: 40px; color: whitesmoke;} .newTask {display: block; width: 500px; height: 50px; line-height: 50px; padding-left: 10px; margin: 0 auto; font-size: 20px; outline: none; border: none } .todolist li {height: 30px; line-height: 30px; padding-left: 15px; margin: 10px 0; font-size: 25px; color: white;} .todolist .item {margin-left: 15px Width: 50px; height: 30px; float: right; color: white; background-color: transparent; border: none; font-size: 20px;} .footer {width: 600px; height: 30px Padding: 10px 0; vertical-align: middle;} .footer p {display: inline-block; padding-left: 15px; color: white; font-size: 20px } notepad {{index + 1}} {{item}} Delete Items: {{list.length}}
Clear const app = new Vue ({el: "# todoapp", data: {list: [], newItem: ""}) Methods: {add () {if (this.newItem = "") {return } else {if (! this.list.includes (this.newItem)) {this.list.push (this.newItem); this.newItem = "" } else {alert ("do not add duplicate events!") ; this.newItem = "";}, del (index) {this.list.splice (index, 1);}, clear () {this.list = [] }) Thank you for your reading, the above is the content of "how to achieve the simple notepad function of Vue". After the study of this article, I believe you have a deeper understanding of how to achieve the simple notepad function of Vue, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
