Vue实现todolist效果（增删改查和本地存储状态）

最新推荐文章于 2024-08-04 12:12:11 发布

郁郁青枝

最新推荐文章于 2024-08-04 12:12:11 发布

阅读量1.1k

点赞数 2

文章标签： javascript vue.js

本文链接：https://blog.youkuaiyun.com/wzsrlndm/article/details/120523987

版权

本文介绍了如何使用Vue.js实现一个功能完善的TodoList应用，包括增删改查功能，并利用本地存储保留应用状态。通过拆分组件如MyHeader, MyItem, MyFooter和MyList，实现组件化开发，避免标签冲突。" 2026277,113545,使用DataSet高效处理XML数据,"['数据库', '服务器', 'XML处理', 'C#编程', '数据存储']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

实现每一项的独特命名来实现删除添加选取的精准操作需要在终端安装nanoid 指令为npm i nanoid并在header页中配置

可以根据功能来拆分组件共可以拆分组件分别为MyHeader MyItem MyFooter添加My的作用主要是用来防止标签与html5中新增标签起冲突，而MyItem中包含MyList组件

组件创建完成后需要在App.vue中注册

App的所有代码

<template>
  <div id="app">
    <div class="todo-container">
      <div class="todo-wrap">
        <MyHeader :addTodo="addTodo" />
        <Mylist
          :todos="todos"
          :checkTodo="checkTodo"
          :deleteTodo="deleteTodo"
        />
        <MyFooter
          :todos="todos"
          :checkAllTodo="checkAllTodo"
          :clearAllTodo="clearAllTodo"
        />
      </div>
    </div>
  </div>
</template>

<script>
import MyHeader from "./components/MyHeader.vue";
import Mylist from "./components/Mylist.vue";
import MyFooter from "./components/MyFooter.vue";
export default {
  name: "App",
  components: {
    MyFooter,
    MyHeader,
    Mylist,
  },
  data() {
    return {
      todos: JSON.parse(localStorage.getItem("todos")) || [],
    };
  },
  methods: {
    addTodo(todoObj) {
      this.todos.unshift(todoObj);
    },
    checkTodo(id) {
      this.todos.forEach

最低0.47元/天解锁文章