这篇文章主要讲解了“Vue怎么实现简易记事本功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue怎么实现简易记事本功能”吧！
预览图：
功能如下：
（1）输入任务并按下回车键，可将任务添加至任务列表（不可输入重复任务）
（2）点击删除，可删除对应任务
（3）点击清空，所有任务都会被删除
（4）左下角同步显示任务总数
完整代码如下：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>记事本</title> <style> * { 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; } .destroy, .clear { 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; } </style></head> <body> <section id="todoapp"> <header class="header"> <h2>记事本</h2> <input type="text" v-model="newItem" class="newTask" placeholder="请输入任务" @keyup.enter="add"> </header> <section> <ul class="todolist"> <li v-for="(item, index) in list"> <div> <span>{{ index + 1 }}</span> <label class="item">{{ item }}</label> <button class="destroy" @click="del(index)">删除</button> </div> </li> </ul> </section> <footer class="footer"> <p class="count"> items: {{ list.length }} </p> <button class="clear" @click="clear" v-show="list.length != 0">清空</button> </footer> </section> <script src="./vue.js"></script> <script> 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("请勿添加重复事件！"); this.newItem = ""; } } }, del(index) { this.list.splice(index, 1); }, clear() { this.list = []; } } }) </script></body> </html>感谢各位的阅读，以上就是“Vue怎么实现简易记事本功能”的内容了，经过本文的学习后，相信大家对Vue怎么实现简易记事本功能这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
