vue-todolist-demo
阿新 • • 發佈：2019-02-02
最近學習vue.js，仿照教程做了一個demo，記錄一下，先上效果圖
原始碼
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>vue-todolist</title> <meta charset="utf-8" /> <script src="Scripts/vue.js"></script> </head> <body> <style type="text/css"> #todolist li.finished { background-color: green; color: white; } </style> <div id="todolist"> <h2 @click="clickH2" v-bind:title="!isEditting?'點選編輯':''"> <input v-model="user" v-show="isEditting" @keyup.enter="isEditting=false" @blur="isEditting=false" /> <span v-show="!isEditting" @click="isEditting=true" title="點選編輯">{{user}}</span> <span>的todolist</span> </h2> <div> <button @click="addOne">新增新專案</button> <button @click="deleteSelectedItems">刪除所選專案</button> <button @click="deleteAll">刪除所有專案</button> </div> <ul v-for="(item, index) in list"> <li v-bind:class="[item.finished?'finished':'']"> <div v-show="item.isEditting"> <input type="checkbox" v-model="item.selected" /> <input v-model="item.content" class="content" /> <button @click="item.isEditting=false">儲存</button> </div> <div v-show="!item.isEditting"> <input type="checkbox" v-model="item.selected" /> <span>{{item.content}}</span> <button v-if="!item.finished" @click="item.finished=true">標記為已完成</button> <button v-if="item.finished" @click="item.finished=false">標記為未完成</button> <button @click="editItem(index)">編輯</button> </div> </li> </ul> </div> <script> new Vue({ el: '#todolist', data: function () { var user = localStorage.getItem('todolist_user') || '' var list = [] var listStr = localStorage.getItem('todolist_list') if (listStr) { list = JSON.parse(listStr) } return { isEditting: false, user: user, list: list } }, watch: { user: function (val, oldVal) { localStorage.setItem('todolist_user', val) }, list: { handler: function (val, oldVal) { var str = JSON.stringify(val) localStorage.setItem('todolist_list', str) }, deep: true } }, methods: { clickH2: function () { if (!this.user) { this.isEditting = true } }, addOne: function () { var item = { title: '', finished: false, selected: false, isEditting: true } this.list.push(item) var vm = this Vue.nextTick(function () { vm.$el.querySelectorAll('li')[vm.list.length - 1].querySelector('.content').focus() }) }, editItem: function (index) { this.list[index].isEditting = true var vm = this Vue.nextTick(function () { vm.$el.querySelectorAll('li')[index].querySelector('.content').focus() }) }, deleteSelectedItems: function () { this.list = this.list.filter(function (item) { return !item.selected }) }, deleteAll: function () { this.list = [] } } }) </script> </body> </html>