使用Vue写一个todoList事件备忘录经典小案例

讲解“使用Vue写一个todoList事件备忘录经典小案例”的完整攻略。

1. 准备工作

在开始实践之前，需要做一些准备工作：

安装Vue

Vue可以通过CDN或者npm安装，这里介绍使用npm安装的方式：

npm install vue

创建Vue的实例

在html文件中引入Vue，然后创建一个Vue实例，用于绑定页面元素和数据：

<!DOCTYPE html>
<html>
<head>
  <title>Todo List</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    });
  </script>
</body>
</html>

2. 实现Todo List

接下来，我们开始实现Todo List。

显示任务列表

首先，在Vue的data属性中增加一个tasks数组，用于存储所有的任务。

data() {
  return {
    tasks: []
  }
}

为了方便展示任务列表，我们增加一个ul元素，遍历tasks并使用v-for指令动态创建li元素。

<ul>
  <li v-for="(task, index) in tasks" :key="index">{{ task }}</li>
</ul>

此时，我们已经可以将任务列表的所有任务展示出来了。

增加任务

为了能够增加任务，在页面中增加一个输入框和一个按钮。

<input type="text" v-model="newTask" />
<button @click="addTask">Add Task</button>

在data中增加一个newTask变量，用于绑定输入框的值，同时增加一个addTask方法，用于将任务添加到tasks数组中。

data() {
  return {
    tasks: [],
    newTask: ''
  }
},
methods: {
  addTask() {
    this.tasks.push(this.newTask);
    this.newTask = '';
  }
}

删除任务

最后，为了能够删除任务，在每个li元素中增加一个删除按钮。

<ul>
  <li v-for="(task, index) in tasks" :key="index">
    {{ task }}
    <button @click="deleteTask(index)">Delete</button>
  </li>
</ul>

在methods中增加一个deleteTask方法，用于删除指定索引位置的任务。

methods: {
  // ...
  deleteTask(index) {
    this.tasks.splice(index, 1);
  }
}

至此，我们已经成功地实现了一个简单的Todo List。

3. 示例说明

示例一：增加任务

在输入框中输入新的任务文本，点击“Add Task”按钮，新的任务将被添加到任务列表中。

<input type="text" v-model="newTask" />
<button @click="addTask">Add Task</button>

data() {
  return {
    tasks: [],
    newTask: ''
  }
},
methods: {
  addTask() {
    this.tasks.push(this.newTask);
    this.newTask = '';
  }
}

示例二：删除任务

在任务列表中点击某个任务后的“Delete”按钮，该任务将从任务列表中删除。

<ul>
  <li v-for="(task, index) in tasks" :key="index">
    {{ task }}
    <button @click="deleteTask(index)">Delete</button>
  </li>
</ul>

methods: {
  // ...
  deleteTask(index) {
    this.tasks.splice(index, 1);
  }
}

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用Vue写一个todoList事件备忘录经典小案例 - Python技术站