效果圖如下：

在輸入框中輸入內容，會在下面顯示，點選內容會填加下劃線，點選刪除按鈕可以刪除這條資訊。下面是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)
        }
    }
});