以最简单的方式向您展示Vue3中Task List的用法

2024-02-26 05:50:25

前言

Vue3是一个受欢迎的前端框架，以其轻量级、渐进式框架和双向数据绑定等特点而著称。在Vue3中，我们可以使用Task List组件来轻松创建和管理任务列表。本教程将向您展示如何使用Vue3构建一个简单的Task List，让您快速了解其基本用法。

搭建开发环境

首先，我们需要搭建一个开发环境来运行我们的Vue3项目。您可以使用Vue CLI工具来快速搭建开发环境。

npm install -g @vue/cli
vue create task-list

创建Task List组件

现在，让我们创建一个Task List组件。在src/components目录下创建一个名为TaskList.vue的文件，并添加以下代码：

<template>
  <div>
    <h1>Task List</h1>
    <ul>
      <li v-for="task in tasks" :key="task.id">
        {{ task.name }}
        <button @click="removeTask(task.id)">X</button>
      </li>
    </ul>
    <input type="text" v-model="newTask" @keyup.enter="addTask">
  </div>
</template>

<script>
export default {
  data() {
    return {
      tasks: [
        { id: 1, name: 'Task 1' },
        { id: 2, name: 'Task 2' },
        { id: 3, name: 'Task 3' }
      ],
      newTask: ''
    }
  },
  methods: {
    addTask() {
      if (this.newTask.trim()) {
        this.tasks.push({ id: Date.now(), name: this.newTask });
        this.newTask = '';
      }
    },
    removeTask(id) {
      const index = this.tasks.findIndex(task => task.id === id);
      this.tasks.splice(index, 1);
    }
  }
}
</script>

使用Task List组件

现在，我们可以使用Task List组件了。在src/App.vue文件中，添加以下代码：

<template>
  <div id="app">
    <task-list></task-list>
  </div>
</template>

<script>
import TaskList from './components/TaskList.vue';

export default {
  components: {
    TaskList
  }
}
</script>