当前位置：首页 > VUE

vscode实现vue的todolist

2026-02-21 13:18:02VUE

使用VSCode实现Vue的TodoList

环境准备

确保已安装Node.js和VSCode编辑器。在VSCode中安装Vue.js扩展插件（如Volar）以支持Vue开发。

创建Vue项目

打开VSCode终端，运行以下命令创建Vue项目：

npm init vue@latest vue-todolist

按照提示选择默认配置或自定义配置。完成后进入项目目录并安装依赖：

cd vue-todolist
npm install

项目结构

主要文件位于src目录下：

App.vue：主组件
components/：存放子组件
main.js：入口文件

实现TodoList功能

1. 数据模型 在App.vue的<script>部分定义任务列表和新增任务的方法：

export default {
  data() {
    return {
      tasks: [],
      newTask: ''
    }
  },
  methods: {
    addTask() {
      if (this.newTask.trim()) {
        this.tasks.push({
          id: Date.now(),
          title: this.newTask,
          completed: false
        })
        this.newTask = ''
      }
    },
    removeTask(id) {
      this.tasks = this.tasks.filter(task => task.id !== id)
    },
    toggleComplete(id) {
      const task = this.tasks.find(task => task.id === id)
      if (task) task.completed = !task.completed
    }
  }
}

2. 模板部分 在App.vue的<template>中添加以下代码：

<div class="todo-app">
  <h1>Todo List</h1>
  <div class="input-area">
    <input 
      v-model="newTask" 
      @keyup.enter="addTask" 
      placeholder="Add new task"
    />
    <button @click="addTask">Add</button>
  </div>
  <ul class="task-list">
    <li v-for="task in tasks" :key="task.id">
      <input 
        type="checkbox" 
        :checked="task.completed" 
        @change="toggleComplete(task.id)"
      />
      <span :class="{ completed: task.completed }">{{ task.title }}</span>
      <button @click="removeTask(task.id)">Delete</button>
    </li>
  </ul>
</div>

3. 样式部分 在App.vue的<style>中添加基础样式：

.todo-app {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}
.input-area {
  margin-bottom: 20px;
}
.task-list {
  list-style: none;
  padding: 0;
}
.task-list li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.completed {
  text-decoration: line-through;
  color: #888;
}
button {
  margin-left: 10px;
}