Vue.js之todolist

最新推荐文章于 2020-10-24 20:17:59 发布

Winson Qi

最新推荐文章于 2020-10-24 20:17:59 发布

阅读量186

点赞数

分类专栏： Vue.js 文章标签： Vue.js

本文链接：https://blog.csdn.net/qiqitao521/article/details/89571436

版权

Vue.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先在src文件夹下面建一个model的子文件夹, 在model文件夹下面新建一个storage.js的文件.
书写storage.js的逻辑

//封装操作本地localstorage本地存储方法，模块化文件
var storage={
    set(key,value){
       localStorage.setItem(key,JSON.stringify(value))
    },
    get(key){
        return JSON.parse(localStorage.getItem(key));
    },
    remove(key)
    {
        localStorage.removeItem(key);
    }
}
export default storage;

在App.js文件中调用storage.js

<template>
    <div class="app">
        <input type="text" placeholder="pls input" v-model="todo" @keydown="addData($event)">
        <hr>
        <h2>进行中</h2>
        <ul>
            <li v-for="(item,key) in list" v-if="!item.checked">
                 <input type="checkbox" v-model="item.checked" @change="saveData()">{{item.title}}<button @click="deleteData(key)">Delete</button>
            </li>
        </ul>
        <h2>已完成</h2>
        <ul>
            <li v-for="(item,key) in list" v-if="item.checked">
                <input type="checkbox" v-model="item.checked" @change="saveData()">{{item.title}}<button @click="deleteData(key)">Delete</button>
            </li>
        </ul>
    </div>
</template>

<script>
import storage from './model/storage.js';  //在script中引入storage.js
export default {
    data(){
        return {
           todo:'', 
           list:[
               {
                   title: 'TDC',
                   checked: false
               },
               {
                   title: 'OMD',
                   checked: true
               }
           ]
        }
    },
    methods:{
        deleteData(key){
            this.list.splice(key,1);
            //localStorage.setItem('list',JSON.stringify(this.list));  //这个是不创建storage.js的原始写法
            storage.set('list',this.list);    //在方法中添加缓存
        },
        addData(e){
            console.log(e.keyCode)
            if(e.keyCode==13)
            {
                this.list.push({
                    title: this.todo,
                    checked:false
                })
                this.todo='';    
            }
            //localStorage.setItem('list',JSON.stringify(this.list));
            storage.set('list',this.list);  //在方法中添加缓存
        },
        saveData(){
            //localStorage.setItem('list',JSON.stringify(this.list));
            storage.set('list',this.list);  //在方法中添加缓存
        }
    },
    mounted(){
        //var list=JSON.parse(localStorage.getItem('list'));
        var list=storage.get('list');   //生命周期函数，也叫钩子函数获取缓存的结果
        if(list)
        {
            this.list=list;
        }
    }
}
</script>