用Vue写一个todolist

好的，我可以回答这个问题。使用Vue可以很方便地实现一个todolist，可以使用Vue的组件化思想，将任务列表和添加任务的表单分别封装成组件，然后在父组件中引用这些组件，实现一个完整的todolist应用。同时，可以使用Vue的数据绑定和计算属性等特性，方便地实现任务的添加、删除、标记完成等功能。

相关问题

用vue3写一个todolist

好的，我来给你写一个todolist。

首先，我们需要创建一个空的Vue 3项目，可以使用Vue CLI来创建。

在终端中输入以下命令：

vue create todolist

接着，我们需要安装一些必要的依赖，包括`vuex`和`axios`。

在终端中输入以下命令：

cd todolist
npm install vuex axios

接下来，我们需要在src目录下创建一个名为`components`的文件夹，并在其中创建一个名为`TodoList.vue`的文件。

在`TodoList.vue`中，我们可以写下以下代码：

<template>
  <div>
    <h1>Todolist</h1>
    <input type="text" v-model="newTodo" @keydown.enter="addTodo" placeholder="Add new todo">
    <ul>
      <li v-for="(todo, index) in todos" :key="todo.id">
        <input type="checkbox" v-model="todo.completed" />
        <span :class="{ completed: todo.completed }">{{ todo.title }}</span>
        <button @click="deleteTodo(index)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { reactive } from 'vue';
import axios from 'axios';

export default {
  name: 'TodoList',
  setup() {
    const state = reactive({
      todos: [],
      newTodo: '',
    });

    const fetchData = async () => {
      const response = await axios.get('https://jsonplaceholder.typicode.com/todos');
      state.todos = response.data;
    };

    const addTodo = () => {
      if (state.newTodo.length > 0) {
        const newTodo = {
          id: state.todos.length + 1,
          title: state.newTodo,
          completed: false,
        };
        state.todos.push(newTodo);
        state.newTodo = '';
      }
    };

    const deleteTodo = (index) => {
      state.todos.splice(index, 1);
    };

    return {
      state,
      fetchData,
      addTodo,
      deleteTodo,
    };
  },
  mounted() {
    this.fetchData();
  },
};
</script>

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

在这个代码中，我们使用了Vue 3的Composition API来实现了`reactive`函数，它允许我们定义一个响应式的状态对象。我们还使用了`axios`来从外部API获取到了一些假数据，并将其渲染到了页面中。

现在我们只需要在`App.vue`中引入`TodoList.vue`组件即可：

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

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

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

现在我们已经完成了一个简单的todolist应用程序。当你运行`npm run serve`时，你应该可以看到一个具有添加和删除功能的todolist。

用vue帮我写一个todolist

很棒！以下是一个简单的todolist示例，使用Vue.js和localStorage来保存任务列表。

HTML代码：

<div id="app">
  <h1>Todo List</h1>
  <form @submit.prevent="addTask">
    <input type="text" v-model="newTask" placeholder="Add a task">
    <button>Add</button>
  </form>
  <ul>
    <li v-for="(task, index) in tasks" :key="index">
      <input type="checkbox" v-model="task.completed" @change="saveTasks">
      <span :class="{ completed: task.completed }">{{ task.text }}</span>
      <button @click="deleteTask(index)">Delete</button>
    </li>
  </ul>
</div>

Vue.js代码：

new Vue({
  el: '#app',
  data: {
    newTask: '',
    tasks: JSON.parse(localStorage.getItem('tasks')) || []
  },
  methods: {
    addTask() {
      if (this.newTask.trim()) {
        this.tasks.push({
          text: this.newTask,
          completed: false
        });
        this.newTask = '';
        this.saveTasks();
      }
    },
    deleteTask(index) {
      this.tasks.splice(index, 1);
      this.saveTasks();
    },
    saveTasks() {
      localStorage.setItem('tasks', JSON.stringify(this.tasks));
    }
  }
});

CSS代码：

.completed {
  text-decoration: line-through;
}

在这个示例中，每当一个任务被添加、删除或标记为已完成时，我们都会调用 `saveTasks` 方法来保存任务列表到 localStorage 中。我们也可以在页面刷新后恢复列表，因为我们在 Vue.js 的 `data` 选项中使用了从 localStorage 中解析的数据。

如果需要更多的功能，可以根据需要自行扩展该示例。