当前位置：首页 > VUE

web用vue实现todolist

2026-01-21 04:44:19VUE

使用 Vue 实现 TodoList

创建 Vue 项目

确保已安装 Node.js 和 Vue CLI，通过以下命令创建新项目：

vue create todo-list

选择默认配置或手动配置，完成后进入项目目录：

cd todo-list

项目结构

主要文件结构如下：

web用vue实现todolist

src/App.vue：主组件
src/components/TodoList.vue：TodoList 组件
src/assets：静态资源

实现 TodoList 组件

在 src/components/TodoList.vue 中编写核心逻辑：

<template>
  <div class="todo-list">
    <h3>Todo List</h3>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new task">
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
        <button @click="toggleTodo(index)">Toggle</button>
        <button @click="removeTodo(index)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: []
    }
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim() === '') return
      this.todos.push({ text: this.newTodo, completed: false })
      this.newTodo = ''
    },
    toggleTodo(index) {
      this.todos[index].completed = !this.todos[index].completed
    },
    removeTodo(index) {
      this.todos.splice(index, 1)
    }
  }
}
</script>

<style>
.completed {
  text-decoration: line-through;
  color: gray;
}
</style>

集成到主组件

修改 src/App.vue 引入 TodoList 组件：

web用vue实现todolist

<template>
  <div id="app">
    <TodoList />
  </div>
</template>

<script>
import TodoList from './components/TodoList.vue'

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