Vue學習之旅----todolist
阿新 • • 發佈:2018-12-16
<template> <div id="app"> <input type="text" v-model="todo" @keydown="addData($event)"> <button @click="addData()">增加+</button> <hr> <h2>進行中</h2> <ul> <li v-for="(item,key) in list" :key=key v-if="!item.checked"> <input type="checkbox" v-model='item.checked' @change="saveList()"> {{item.title}}----------- <button @click="delData(key)">刪除</button> </li> </ul> <h2>已完成</h2> <ul> <li v-for="(item,key) in list" :key=key v-if="item.checked"> <input type="checkbox" v-model='item.checked' @change="saveList()"> {{item.title}}----------- <button @click="delData(key)">刪除</button> </li> </ul> <button @click="getList()">獲取list的值</button> <router-view /> </div> </template> <script> import storage from './model/storage.js' console.log(storage) export default { data () { return { name: 'App', todo: '', list: [ { title: 'ionic', checked: false }, { title: 'ionic2', checked: false } ] } }, methods: { addData (e) { if (e.keyCode === 13) { this.list.push({ title: this.todo, checked: false }) this.todo = '' } localStorage.setItem('list', JSON.stringify(this.list)) }, delData (key) { this.list.splice(key, 1) localStorage.setItem('list', JSON.stringify(this.list)) }, getList () { console.log(this.list) }, saveList () { } }, mounted () { var list = JSON.parse(localStorage.getItem('list')) if (list) { this.list = list } } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
// 封裝操作localstrage
var storage = {
set (key, value) {
localStorage.setItem(key, JSON.stringify(value))
},
get (key) {
return JSON.parse(localStorage.getItem(key))
},
remove (key) {
return JSON.parse(localStorage.removeItem(key))
}
}
export default storage