Vue实现简易记事本
作者:webWangGe
这篇文章主要为大家详细介绍了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>h1 { 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"> <h1>记事本</h1> <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="https://cdn.bootcss.com/vue/2.4.2/vue.min.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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。