用vue.js寫todoMvc
阿新 • • 發佈：2018-12-14
HTML部分
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Template • TodoMVC</title> <link rel="stylesheet" href="node_modules/todomvc-common/base.css"> <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css"> <link rel="stylesheet" href="css/app.css"> </head> <body> <section class="todoapp" id="todoapp"> <header class="header"> <h1>todos</h1> <input class="new-todo" placeholder="What needs to be done?" autofocus @keyup.enter="add" > </header> <section class="main"> <input id="toggle-all" class="toggle-all" type="checkbox" @click="toggleAll" :checked="toggleStatus" > <label for="toggle-all">Mark all as complete</label> <ul class="todo-list"> <!-- 完成狀態的樣式：completed 未完成狀態：不需要樣式 編輯狀態的樣式 editing --> <!-- 使用中間變數，預設為null，edit的樣式就取決於中間變數是否等價於當前的任務項，如果等於，則為true，即條件成立，顯示editing 當JS程式碼很少時，可以直接寫內聯JS語句 --> <li v-for="(item,index) in getCom" :key="item.id" :class="{completed:item.completed,editing:item === isTrue}"> <div class="view"> <input class="toggle" type="checkbox" v-model="item.completed"> <label @dblclick="isTrue = item">{{item.title}}</label> <button class="destroy" @click="remove(index)"></button> </div> <input v-focus class="edit" :value="item.title" @keyup.esc=" isTrue = null" @keyup.enter="saveEdit(item,index,$event)"> </li> </ul> </section> <footer class="footer"> <span class="todo-count"><strong>{{getCountComputed}}</strong> item left</span> <ul class="filters"> <li> <a :class="{selected: getCom ===1}" href="#/" @click="isType = 1">全部</a> </li> <li> <a href="#/active" :class="{selected: getCom ===2}" @click="isType = 2">未完成</a> </li> <li> <a href="#/completed" :class="{selected: getCom ===3}" @click="isType = 3">已完成</a> </li> </ul> <button class="clear-completed" @click="removeAll" v-show="getCountComputed !== list.length">清除選中</button> </footer> </section> <footer class="info"> <p>Double-click to edit a todo</p> <p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p> <p>Created by <a href="http://todomvc.com">you</a></p> <p>Part of <a href="http://todomvc.com">TodoMVC</a></p> </footer> <script src="node_modules/vue/dist/vue.js"></script> <script src="js/app1.js"></script> </body> </html>
JS部分
(function () { const list = [ {id:1,title:'吃飯',completed:false}, {id:2,title:'睡覺',completed:true}, {id:3 ,title:'打豆豆',completed:true} ]; Vue.directive('focus',function (el) { el.focus(); }); var vm = new Vue({ el:'#todoapp', data:{ list:list, isTrue:null, isType:1 }, methods:{ add(e){ let listText = e.target.value.trim(); if(!listText.length) return false; let last = this.list[this.list.length -1]; let id = last?last.id+1:1; this.list.push({id:id ,title:listText,completed:false}); e.target.value = ''; }, toggleAll(e){ let checked = e.target.checked; this.list.forEach(item =>{ item.completed = checked; }) }, remove(index){ this.list.splice(index,1); }, removeAll(){ this.list = this.list.filter(item =>{ return !item.completed; }) }, saveEdit(item,index,e){ let editText = e.target.value; if (!editText.length) { return this.list.splice(index,1); } item.title = editText; this.isTrue = null; }, }, computed:{ getCountComputed(){ return this.list.filter((item) => !item.completed).length }, toggleStatus(){ return this.list.every(item => item.completed); }, getCom(){ if (this.isType === 1){ return this.list; } else if (this.isType === 2){ return this.list.filter((item) => !item.completed); } else{ return this.list.filter((item) => item.completed); } } } }) })();