vue版todoList
Posted rchi
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue版todoList相关的知识,希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>VueTodoList</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 <link href="css/style.css" rel="stylesheet" /> 11 <link href="css/animate.css" rel="stylesheet" /> 12 </head> 13 14 <body> 15 <div id="app"> 16 <header> 17 <section> 18 <form action="javascript:;"> 19 <label for="title">ToDoList</label> 20 <!-- 绑定回车事件 --> 21 <input type="text" id="title" name="title" placeholder="添加ToDo" autocomplete="off" required 22 v-model="addDoingThings" @keydown.enter="addDoingThingsList" /> 23 </form> 24 </section> 25 </header> 26 <section> 27 <h2>正在进行 <span id="todocount">0</span></h2> 28 <div id="todolist" class="demo-box"> 29 <transition-group name="slide" enter-active-class="animated bounceInLeft" 30 leave-active-class="animated bounceOutRight"> 31 <span class="doingItem" v-for="(item, index) in doingList" :key="‘item‘+index"> 32 <input type="checkbox" @click.prevent="checkDoneThings(item.id)"> 33 <span>{{item.content}}</span> 34 <a href="javascript:;" class="delBtn" @click.prevent="delThings(item.id)">-</a> 35 </span> 36 </transition-group> 37 </div> 38 <h2>已经完成 <span id="donecount">0</span></h2> 39 <div id="donelist"> 40 <transition-group name="slide" enter-active-class="animated bounceInLeft" 41 leave-active-class="animated bounceOutRight"> 42 <span class="doneItem" v-for="(item, index) in doneList" :key="‘item‘+index"> 43 <input type="checkbox" checked @click.prevent="checkDoneThings(item.id)"> 44 <span>{{item.content}}</span> 45 <a href="javascript:;" class="delBtn" @click.prevent="delThings(item.id)">-</a> 46 </span> 47 </transition-group> 48 </div> 49 </section> 50 <footer> 51 Copyright © 2020 <a href="https://www.cnblogs.com/rchi/">股股清流@博客园</a> 52 </footer> 53 </div> 54 <script> 55 var app = new Vue({ 56 el: ‘#app‘, 57 data: { 58 todoList: [], 59 addDoingThings: "" 60 }, 61 computed: { 62 //通过过滤未做好事情列表和已做好事件列表 63 //正在做的事件 64 doingList: function () { 65 let arr = this.todoList.filter(function (item, index) { 66 return !item.isDone 67 }) 68 return arr; 69 }, 70 //已做好的事件 71 doneList: function () { 72 let arr = this.todoList.filter(function (item, index) { 73 return item.isDone 74 }) 75 return arr; 76 } 77 }, 78 mounted() { 79 //页面初始化完毕,从本地存储中拿到todoList替换本地todoList 80 this.todoList = localStorage.todoList ? JSON.parse(localStorage.todoList) : []; 81 }, 82 methods: { 83 //添加待做事情列表,id:要做的事情的序号,content:要做的事情,idDone:是否做好,默认是未做好 84 addDoingThingsList: function () { 85 if (this.addDoingThings == "") return 86 this.todoList.push({ 87 id: this.todoList.length, 88 content: this.addDoingThings, 89 isDone: false 90 }) 91 this.addDoingThings = "" 92 this.saveData() 93 }, 94 //保存数据到本地存储 95 saveData: function () { 96 localStorage.todoList = JSON.stringify(this.todoList) 97 }, 98 //选择做完的事情 99 checkDoneThings: function (id) { 100 this.todoList[id].isDone = !this.todoList[id].isDone; 101 //每次修改后要保存 102 this.saveData(); 103 }, 104 //删除任务 105 delThings: function (id) { 106 this.todoList.splice(id, 1) 107 this.todoList.forEach(function (item, i) { 108 item.id = i 109 }) 110 //每次修改后要保存 111 this.saveData(); 112 } 113 } 114 }); 115 </script> 116 </body> 117 </html>
1 body { 2 margin: 0; 3 padding: 0; 4 font-size: 16px; 5 background: #cdcdcd; 6 } 7 8 a { 9 text-decoration: none; 10 } 11 12 header { 13 height: 50px; 14 background: #333; 15 background: rgba(47, 47, 47, 0.98); 16 } 17 18 section { 19 margin: 0 auto; 20 } 21 22 label { 23 float: left; 24 width: 100px; 25 line-height: 50px; 26 color: #ddd; 27 font-size: 24px; 28 cursor: pointer; 29 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 30 } 31 32 header input { 33 float: right; 34 width: 60%; 35 height: 24px; 36 margin-top: 12px; 37 text-indent: 10px; 38 border-radius: 5px; 39 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 40 0 1px 6px rgba(0, 0, 0, 0.45) inset; 41 border: none; 42 } 43 44 input:focus { 45 outline-width: 0; 46 } 47 48 h2 { 49 position: relative; 50 } 51 52 .doingItem, 53 .doneItem { 54 display: flex; 55 } 56 57 .doingItem span, 58 .doneItem span { 59 flex: 10; 60 display: inline-block; 61 padding: 0 5px; 62 text-align: left; 63 color: #666; 64 font-size: 14px; 65 } 66 67 .doingItem input, 68 .doneItem input { 69 width: 22px; 70 height: 22px; 71 cursor: pointer; 72 align-self: center; 73 } 74 75 p { 76 margin: 0; 77 } 78 79 .doingItem p input, 80 .doneItem p input { 81 top: 3px; 82 left: 40px; 83 width: 70%; 84 height: 20px; 85 line-height: 14px; 86 text-indent: 5px; 87 font-size: 14px; 88 } 89 90 .doingItem, 91 .doneItem { 92 height: 32px; 93 line-height: 32px; 94 background: #fff; 95 position: relative; 96 margin-bottom: 10px; 97 padding: 0 10px; 98 border-radius: 3px; 99 border-left: 5px solid #629a9c; 100 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07); 101 } 102 103 .doneItem { 104 border-left: 5px solid #666; 105 } 106 107 .doingItem a.delBtn, 108 .doneItem a.delBtn { 109 display: inline-block; 110 line-height: 18px; 111 width: 22px; 112 height: 22px; 113 border-radius: 14px; 114 text-align: center; 115 background: #f1f1f1; 116 color: #666; 117 font-size: 28px; 118 cursor: pointer; 119 align-self: center; 120 } 121 122 footer { 123 color: #666; 124 font-size: 14px; 125 text-align: center; 126 } 127 128 footer a { 129 color: #666; 130 text-decoration: none; 131 color: #999; 132 } 133 134 @media screen and (max-device-width: 620px) { 135 section { 136 width: 96%; 137 padding: 0 2%; 138 } 139 } 140 141 @media screen and (min-width: 620px) { 142 section { 143 width: 600px; 144 padding: 0 10px; 145 } 146 }
以上是关于vue版todoList的主要内容,如果未能解决你的问题,请参考以下文章
Vue项目实战——实现一个任务清单基于 Vue3.x 全家桶(简易版)