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)        }    }});