Vue版todolist案例

todolist – 记录你的待办事项

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Vue版todolist案例</title><style type="text/css">*{margin: 0;padding: 0;box-sizing: border-box;}#app{width: 100vw;height: 100vh;background: #CDCDCD;}/* 头部样式 */header{height: 50px;background: rgba(47,47,47,0.98);line-height: 50px;}section{width: 80vw;margin: 0 auto;}label{float: left;color: #DDD;font-size: 24px;font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;}section > input{height: 24px;width: 60%;float: right;margin-top: 15px;text-indent: 10px;border-radius: 5px;box-shadow: 0 1px 0 rgba(255,255,255,0.24), 0 1px 6px rgba(0,0,0,0.45) inset;border: none;}/* 内容样式 */h2{position: relative;margin: 20px 0;}.todocount{display: inline-block;position: absolute;right: 5px;top: 2px;height: 20px;padding: 0 5px;border-radius: 20px;line-height: 22px;background: #E6E6FA;color: #666;font-size: 14px;text-align: center;}ol{padding: 0;list-style: none;}ol li{height: 32px;line-height: 32px;background: #fff;position: relative;margin-bottom: 10px;padding: 0 45px;border-radius: 3px;border-left: 5px solid #629A9C;box-shadow: 0 1px 2px rgba(0,0,0,0.07);}li > input{position: absolute;top: 6px;left: 10px;width: 22px;height: 22px;cursor: pointer;}li > a{position: absolute;right: 5px;top: 2px;display: inline-block;background: #CCC;width: 25px;height: 25px;border-radius: 14px;border: 6px double #fff;line-height: 14px;text-align: center;color: #fff;font-weight: bold;font-size: 14px;cursor: pointer;}footer {text-align: center;color: #666;}footer > a{text-decoration: none;color: #999;}</style></head><body><div id="app"><!-- 首部 --><header><section><label>ToDoList</label><!-- autocomplete="off" -- 禁用自动完成 --><input v-model="addTodo"  @keydown.enter="addTodoEvent" type="text" name="title" id="title" placeholder="添加ToDo" required="required" autocomplete="off" /></section></header><!-- 内容 --><section><!-- {{ todoings }}
{{ checkTodos }} --><h2>正在进行<span class="todocount">{{ todoingsLength }}</span></h2><ol><li v-for="todoing,index in todoings" :key="index"><!-- 将选中的任务依次添加到checkTodos数组中 --><input @click="toDoEvent(index)" v-model="checkTodos" type="checkbox" name="todoing" :value="todoing" /><p>{{ todoing }}</p><a @click="removeTodoEvent(index)" href="javascript:;" :data-id="index">-</a></li></ol><h2>已经完成<span class="todocount">{{ checkTodosLength }}</span></h2><ol><li v-for="checkTodo,index in checkTodos" :key="index"><!-- 将选中的任务依次添加到todoings数组中 --><input @click="DotoEvent(index)" v-model="todoings" type="checkbox" name="done" :value="checkTodo" disabled /><p>{{ checkTodo }}</p><a @click="removeDotoEvent(index)" href="javascript:;" :data-id="index">-</a></li></ol></section><!-- 底部 --><footer>©2020 Continue.Run<a href="">clear</a></footer></div><script src="../js/vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">var app = new Vue({el: "#app",data: {// 添加todo - 把输入框的值和adTodo绑定在了一起，输入框的值变了，addTodo就会改变addTodo: "",// 正在进行的任务数组，由addTodo添加数据todoings: ["用Vue完成todolist案例","第二条"],checkTodos: [],// 是否显示正在进行的ToDoshowTodoing: true,// 是否显示已经完成的ToDoshowTodone: true},computed: {// 返回正在进行(todoings)数组的长度的计算函数todoingsLength: function(){return this.todoings.length;},// 返回已经完成(checkTodos)数组的长度的计算函数checkTodosLength: function(){return this.checkTodos.length;}},methods: {addTodoEvent: function(){console.log("添加ToDo");// 在正在进行添加todothis.todoings.push(this.addTodo)// 添加完成之后清空输入框的文字this.addTodo = ""},removeTodoEvent: function(index){// 把对应的索引传过来// 删除正在进行(todoings)中的Todoconsole.log(index);console.log("删除ToDo");// 删除todoings中的指定内容this.todoings.splice(index,1)},removeDotoEvent: function(index){// 把对应的索引传过来// 删除正在进行(todoings)中的Todoconsole.log(index);console.log("删除ToDo");// 删除todoings中的指定内容this.checkTodos.splice(index,1)},toDoEvent: function(index){// 从正在进行移到已经完成// this.checkTodos.push(this.todoings[index])// this.todoings.splice(index,1)       },DotoEvent: function(index){// 从已经完成移到正在进行// this.todoings.push(this.checkTodos[index])// this.checkTodos.splice(index,1)}},})</script></body>
</html>

效果图：

Vue版todolist案例相关推荐

基于vue的todolist案例
前言:todolist案例真的算是经典了,不管你是学习原生js,还是学习jq,还是学习vue,亦或者是react,todolist是练习必不可少的练习demo了,下面我们来看看这个案例.需要完整代码的 ...
Vue之Todolist案例和ES6语法
2.7 Todolist案例 2.7.1 准备工作 <!DOCTYPE html> <html> <head><meta charset="utf- ...
Vue.js-Day02-AM【Vue表单、核心指令（单选框、密码框、多行文本框、单选、多选、勾选、下拉列表）、组件汇总案例、ToDoList案例、计算属性(computed)、watch监听】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.Vue表单原生JS实现异步表单提交运行截图代码核心指令单选框.密码框.多行文本框单选多选勾 ...
简易版购物车案例(vue)
简易版购物车案例(vue) <div id="app"><div v-if="books.length"><table>&l ...
[Vue] TodoList 案例
前言系列文章目录: [Vue]目录老师的课件笔记,不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU 笔记在线版: https://note.youdao ...
vue2.0-脚手架-todolist案例
一 vue脚手架2.0 安装 npm install vue-cli -g 查阅一下脚手架可支持的模板 vue list可以查到 template-name 使用脚手架生成项目(以下命令得运行在项目的 ...
【Vue2.0】— TodoList案例（十七）
[Vue2.0]- TodoList案例(十七) <template><div id="root"><div class="todo-con ...
尚硅谷todolist案例
vue todolist案例 1 拆分组件一共拆分为4个组件 TodoHeader TodoItem TodoList TodoFooter item是list的子组件 2 组件化编码流程实现静态 ...
ToDoList 案例完整尚硅谷
总结ToDoList案例: 1.组件化编码流程: (1).拆分静态组件:组件要按照功能点拆分,命名不要与html元素冲突. (2).实现动态组件:考虑好数据的存放位置,数据是一个组件再用,还是一些组件 ...

Vue版todolist案例

Vue版todolist案例

Vue版todolist案例相关推荐

最新文章

热门文章