当前位置：首页 > VUE

web用vue实现todolist

2026-02-21 20:14:09VUE

使用 Vue 实现 TodoList

初始化 Vue 项目

通过 Vue CLI 或 Vite 创建一个新的 Vue 项目。以下是使用 Vue CLI 的示例命令：

npm install -g @vue/cli
vue create vue-todolist
cd vue-todolist
npm run serve

创建 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;
}
.todo-list {
  max-width: 400px;
  margin: 0 auto;
}
</style>

在主组件中引入 TodoList

修改 src/App.vue，引入并使用 TodoList 组件：

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

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

export default {
  name: 'App',
  components: {
    TodoList
  }
};
</script>