vue+foundation实现一个待办事项代码
代码语言:html
所属分类:其他
代码描述:vue+foundation实现一个待办事项代码,可以添加删除标记已完成。
代码标签: vue 待办 事项 代码 foundation
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/foundation.min.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> body { background-color:#abc } *,h1,button { font-family:'Nunito',sans-serif } .fade-enter-active,.fade-leave-active { transition:opacity .5s } .fade-enter,.fade-leave-active { opacity:0 } .tasks { width:100%; max-width:45rem; padding:1em; margin:1em auto; overflow:auto; background-color:#fff; box-shadow:0 .25rem 1rem rgba(0,0,0,0.25) } .tasks__list { clear:both } .tasks__item { margin-bottom:.5em; position:relative } .tasks__item__toggle { cursor:pointer; width:100%; text-align:left; padding:.85em 2.25em .85em 1em; background-color:rgba(0,0,0,0.05); border:1px solid rgba(0,0,0,0.1) } .tasks__item__toggle:hover { background-color:rgba(0,0,0,0.1); border-color:rgba(0,0,0,0.15) } .tasks__item__toggle--completed { text-decoration:line-through; background-color:rgba(0,128,0,0.15); border-color:rgba(0,128,0,0.2) } .tasks__item__toggle--completed:hover { background-color:rgba(0,128,0,0.25); border-color:rgba(0,128,0,0.3) } .tasks__item__remove { position:absolute; height:100%; top:50%; right:0; transform:translateY(-50%) } .tasks__item__remove i { vertical-align:middle } </style> </head> <body> <div id="app"> <task-list :tasks="tasks"></task-list> </div><template id="task-list"><section class="tasks"><h1>任务 <transition name="fade"><small v-if="incomplete">({{incomplete}})</small></transition></h1><div class="tasks__new input-group"><input type="text" class="input-group-field" v-model="newTask" @keyup.enter="addTask" placeholder=""><span class="input-group-button"><button @click="addTask" class="button"><i class="fa fa-plus"></i>添加 </button></span></div><div class="tasks__clear button-group pull-right"><button class="button warning small" @click="clearCompleted"><i class="fa fa-check"></i>清除完成 </button><button class="button alert small" @click="clearAll&q.........完整代码请登录后点击上方下载按钮下载查看
网友评论0