Vue实现简易记事本 Vue实现简易记事本

本文实例为大家分享了Vue实现简易记事本的具体代码，供大家参考，具体内容如下
预览图：

文章图片

文章图片

功能如下：
【Vue实现简易记事本】（1）输入任务并按下回车键，可将任务添加至任务列表（不可输入重复任务）
（2）点击删除，可删除对应任务
（3）点击清空，所有任务都会被删除
（4）左下角同步显示任务总数
完整代码如下：

记事本 - 锐客网* {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; } 记事本
{{ index + 1 }}{{ item }}
items: {{ list.length }}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。