用vue的双向绑定简单实现一个todo-list的示例代码

下面详细讲解如何用Vue的双向绑定简单实现一个todo-list的示例代码。

1. 创建Vue实例

首先，需要引入Vue.js文件，并创建Vue实例。在HTML文件中创建一个包含所有Todo项的数组，并在Vue实例中定义data属性来存储数据。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Todo List</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <h1>Todo List</h1>
        <input type="text" v-model="newItem" placeholder="add a new item">
        <button v-on:click="addItem">Add</button>
        <ul>
            <li v-for="(item, index) in items">
                <input type="checkbox" v-model="item.done">
                {{ item.title }}
                <button v-on:click="removeItem(index)">Remove</button>
            </li>
        </ul>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                newItem: '',
                items: [
                    { title: 'Learn Vue.js', done: false },
                    { title: 'Build a Todo app', done: true },
                    { title: 'Deploy it to the web', done: false }
                ]
            },
            methods: {
                addItem: function() {
                    this.items.push({ title: this.newItem, done: false });
                    this.newItem = '';
                },
                removeItem: function(index) {
                    this.items.splice(index, 1);
                }
            }
        });
    </script>
</body>
</html>

在这个代码片段中，我们先定义了一个数组items，并且往数组中添加了几个对象，每个对象包含一个title属性和一个done属性。title代表待办事项的名称，done代表待办事项是否已经完成。

然后，在Vue实例中定义了两个方法addItem和removeItem。addItem方法将新的待办事项添加到items数组中，并将newItem属性重置为空。removeItem方法将数组中的指定项删除。