vue.js实现的一个todo list

效果图如下：

在输入框中输入内容，会在下面显示，点击内容会填加下划线，点击删除按钮可以删除这条信息。下面是html代码

<div id="app">
    <h1 v-html="title"></h1>
    <input v-model="newItem" v-on:keyup.enter="addNew()" />
    <ul>
        <li v-for="item in items">
            <input type="button" value="删除" v-on:click="deleteTask(item)" />
            <span v-bind:class="{finished:item.isFinished}" v-on:click="toggleFinish(item)">{{item.label}}</span>

        </li>
    </ul>
</div>

js代码

const STORAGE_KEY = 'todos-vuejs'

function fetch() {
    return JSON.parse(window.localStorage.getItem(
        STORAGE_KEY) || '[]')
}

function save(items) {
    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items))
}
new Vue({
    el: '#app',
    data: function() {
        return {
            title: 'this is a todo list',
            items: fetch(),
            newItem: ''
        }
    },
    watch: {
        items: {
            handler: function(items) {
                save(items)
            },
            deep: true
        }
    },
    methods: {
        toggleFinish: function(item) {
            item.isFinished = !item.isFinished
        },

        addNew: function() {
            this.items.push({
                label: this.newItem,
                isFinished: false
            })
            this.newItem = ''
        },
        deleteTask: function(item) {
            this.items.splice(this.items.indexOf(item), 1)
        }
    }
});