vue-todoList代码实例

vue-todoList代码实例

<template>
    <p id="app">
        <h1>{{title}}</h1>
        //v-model 双向绑定
        <input v-model='newItem' v-on:keyup.enter='addNew'>
        <ul>
            <li v-for='item in items' v-bind:class='{finished: item.isFinished}' v-on:click='toggleFinish(item)'>
                {{item.label}}
            </li>
        </ul>
    </p>
</template>

<script>
    import Store from './store'
    export defalut {
        data: function() {
            return {
                title: 'this is a todo list',
                newItem: '',
                items: Store.fetch()
            }
        },
        methods: {
            'toggleFinish': function(item) {
                item.isFinished = !item.isFinished
            },
            'addNew':function() {
                this.items.push({
                    label: this.newItem, 
                    isFinished: false})
                this.newItem = '';
            }
        },
        //请注意此处监听的是items
        watch: {
            items: {
                handler: function(val, oldVal) {
                    Store.save(val)
                },
                //深度检索，为true时，当数组中的某个key值发生变化时也会被检索到
                deep: true
            }
        }
    }
</script>
<style></style>


//store.js
const STORAGE_KEY = 'todos-vuejs'
export defalut {
    fetch() {
        return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
    },
    save(items) {
        window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items))
    }
}