vue的简单实例完成！/。

Question

具有以下功能：
1、增加代表事项
2、可选择待办事项
3、可以删除待办事项
4、可以保存待办事项
请你把它改为使用 vue 来实现。

完成标准：
上传 vue编写的 html代码。

Answer 1

引自免费微信小程序：皆我百晓生

为了实现这个Vue应用，我们需要创建一个Vue项目，然后编写HTML、CSS和JavaScript代码。首先确保你已经安装了Node.js和Vue CLI。接下来按照以下步骤操作：

1. 创建一个新的Vue项目：

vue create todo-app

1. 进入项目目录并启动开发服务器：

cd todo-app
npm run serve

1. 在src/components文件夹中创建一个名为TodoList.vue的新文件，并将以下代码粘贴到其中：

<template>
  <div id="todo-app">
    <h1>待办事项</h1>
    <input type="text" v-model="newItem" @keyup.enter="addTodo" placeholder="添加新事项">
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <input type="checkbox" v-model="todo.completed" />
        <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
        <button @click="removeTodo(index)">删除</button>
      </li>
    </ul>
    <button @click="saveTodos">保存</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newItem: '',
      todos: [
        { text: '买早餐', completed: true },
        { text: '参加朋友晚宴', completed: true },
        { text: '学习Vue', completed: false },
      ],
    };
  },
  methods: {
    addTodo() {
      if (this.newItem.trim()) {
        this.todos.push({ text: this.newItem, completed: false });
        this.newItem = '';
      }
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
    },
    saveTodos() {
      localStorage.setItem('todos', JSON.stringify(this.todos));
    },
    loadTodos() {
      const storedTodos = localStorage.getItem('todos');
      if (storedTodos) {
        this.todos = JSON.parse(storedTodos);
      }
    },
  },
  created() {
    this.loadTodos();
  },
};
</script>

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

1. 在src/App.vue中引入TodoList组件：

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

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

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

1. 由于我们已经实现了保存功能，但浏览器刷新后数据会丢失，所以还需要在main.js中处理这种情况：

import Vue from 'vue';
import App from './App.vue';

// Load saved todos on app start
window.onload = function () {
  const storedTodos = localStorage.getItem('todos');
  if (storedTodos) {
    Vue.prototype.$todos = JSON.parse(storedTodos);
  }
};

new Vue({
  render: h => h(App),
}).$mount('#app');

现在，你应该能够在本地运行的Vue应用程序中看到待办事项列表，它具备增加、选择、删除和保存的功能。如果你刷新页面，之前保存的待办事项也会保留下来。这是一个简单的Vue实现的待办事项应用示例。