用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方法将数组中的指定项删除。

2. 实现添加和删除待办事项

在模板中使用v-model指令，实现文本输入框的双向绑定，输入的值将动态更新到Vue的data属性中。

在模板中使用v-on指令，为button添加click事件的监听器，实现添加待办事项的功能。当点击添加按钮时，addItem方法将会被调用。

在模板中使用v-on指令，为button添加click事件的监听器，实现删除待办事项的功能。当点击删除按钮时，removeItem方法将会被调用。

3. 实现待办事项的勾选状态

在Vue的模板中使用v-for指令，将items数组中的每一项遍历渲染为一个li元素。

使用v-model指令，实现复选框与每个待办事项的done属性之间的双向绑定。

这里的绑定是双向的，当用户将复选框勾选或取消勾选时，done属性将会被更新并更新到DOM中。

示例

假设有一个待办事项：“写一篇Vue的博客”，但是你又想去吃午饭。于是你在页面上输入添加一条待办事项：“吃午饭”，那么你的todo-list将会更新，并且呈现如下：

[ ] 学习Vue.js
[x] 制作一个Todo应用程序
[ ] 将应用程序部署到Web上
[x] 吃午饭
[ ] 写一篇Vue的博客

你已经吃完午饭了，那就去勾选或删除它，如下：

[ ] 学习Vue.js
[x] 制作一个Todo应用程序
[ ] 将应用程序部署到Web上
[ ] 写一篇Vue的博客

继续做其他事情，直到你完成了所有待办事项，你将会看到所有待办事项都被勾选，并且这个页的底部显示“恭喜，你完成了所有任务！”的提示语。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：用vue的双向绑定简单实现一个todo-list的示例代码 - Python技术站

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

1. 创建Vue实例

2. 实现添加和删除待办事项

3. 实现待办事项的勾选状态

示例

相关文章