vue案例 todoList

最新推荐文章于 2024-09-05 11:08:38 发布

不知名的曹同学

最新推荐文章于 2024-09-05 11:08:38 发布

阅读量171

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_45904712/article/details/126898612

版权

本文展示了一个基于 Vue.js 的应用实例，包括自定义组件 `MyHeader`, `MyList`, `MyFooter` 的交互。通过 props 和事件传递，实现了添加待办事项、检查、删除及全选清除等功能。`MyHeader` 中使用 `nanoid` 生成唯一ID，`MyList` 中遍历显示并操作 todos 列表，`MyFooter` 显示完成任务数和清除全部功能。

摘要由CSDN通过智能技术生成

app.vue

<template>
  <div>
    <div class="kuang">
      <MyHeader :addTodo="addTodo"></MyHeader>
      <MyList
        :todos="todos"
        :checkTodo="checkTodo"
        :deleteTodo="deleteTodo"
      ></MyList>
      <MyFooter
        :todos="todos"
        :checkAll="checkAll"
        :clearAll="clearAll"
      ></MyFooter>
      <!-- 那个组件要操作data，就把操作data的方法传给那个组件 -->
    </div>
  </div>
</template>

<script>
import MyFooterVue from "./components/MyFooter.vue";
import MyHeaderVue from "./components/MyHeader.vue";
import MyListVue from "./components/MyList.vue";
import MyHeader from "./components/MyHeader.vue";
import MyList from "./components/MyList.vue";
import MyFooter from "./components/MyFooter.vue";
export default {
  name: "App",
  components: {
    MyFooterVue,
    MyHeaderVue,
    MyListVue,
    MyHeader,
    MyList,
    MyFooter,
  },
  data() {
    return {
      todos: [
        { id: "001", title: "抽烟", done: true },
        { id: "002", title: "喝酒", done: false },
        { id: "003", title: "开车", done: true },
      ],
    };
  },
  methods: {
    addTodo(todoObj) {
      this.todos.unshift(todoObj);
    },
    checkTodo(id) {
      this.todos.forEach((todo) => {
        if (todo.id === id) todo.done = !todo.done;
      });
    },
    deleteTodo(id) {
      this.todos = this.todos.filter((todo) => {//filter不修改原来的数组
        return todo.id !== id;
      });
    },
    checkAll(done) {
      this.todos.forEach((todo) => {
        todo.done = done;
      });
    },
    clearAll() {
      this.todos = this.todos.filter((todo) => {
        return !todo.done;
      });
    },
  },
};
</script>

<style>
.kuang {
  width: 500px;
  height: 400px;
  border: 1px solid red;
}
</style>

hearder.vue

<template>
  <div>
    <input
      class="header-size"
      type="text"
      @keyup.enter="add"
      v-model="title"
      placeholder="请输入你的任务名称，按回车键确定"
    />
  </div>
</template>

<script>
import { nanoid } from "nanoid"; //通过nanoid来生成唯一的随机数
export default {
  name: "MyHeader",
  props: ["addTodo"],
  data() {
    return {
      title: "",
    };
  },
  methods: {
    add() {
      if (!this.title.trim()) return; //输入不能为空 并且去掉空格
      // console.log(event.target.value); 通过event获取input输入框的值
      const todoObj = { id: nanoid(), title: this.title, done: false };
      this.addTodo(todoObj);
      this.title = ""; //清空输入框
    },
  },
};
</script>

<style>
.header-size {
  width: 300px;
  height: 30px;
}
</style>

list.vue

<template>
  <div>
    <ul>
      <MyItem
        v-for="todoObj in todos"
        :key="todoObj.id"
        :todo="todoObj"
        :checkTodo="checkTodo"
        :deleteTodo="deleteTodo"
      >
      </MyItem>
    </ul>
  </div>
</template>

<script>
import MyItem from "./MyItem.vue";
import MyHeader from "./MyHeader.vue";
export default {
  name: "MyList",
  components: { MyItem, MyHeader, MyItem },
  props: ["todos", "checkTodo", "deleteTodo"],
};
</script>

<style>
</style>

item.vue

<template>
  <div>
    <ul>
      <li>
        <input
          type="checkbox"
          :checked="todo.done"
          @change="handCheck(todo.id)"
        />
        <span>{{ todo.title }}</span>
        <button @click="handleDelete(todo.id)">删除</button>
        <hr />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "MyItem",
  //props接收数据
  props: ["todo", "checkTodo", "deleteTodo"],
  methods: {
    handCheck(id) {
      this.checkTodo(id);
    },
    handleDelete(id) {
      if (confirm("确定删除吗?")) {//弹窗来确定是否执行下面的操作
        //通知app组件删除选项
        // console.log(id);
        this.deleteTodo(id);
      }
    },
  },
};
</script>

<style>
span {
  font-size: 30px;
}
input {
  display: inline;
}
li button {
  float: right;
  display: none;
  background-color: red;
  margin-top: 3px;
}
li:hover {
  background-color: aqua;
}
li:hover button {
  display: block;
}
</style>

footer.vue

<template>
  <div v-show="todos.length">
    <input type="checkbox" :checked="isAll" @click="changeAll" />
    <span>已完成{{ doneDetails() }}</span
    >/
    <span>全部{{ todos.length }}</span>
    <button @click="clearAllTodo">清除已完成的</button>
  </div>
</template>

<script>
export default {
  name: "MyFooter",
  props: ["todos", "checkAll", "clearAll"],
  methods: {
    doneDetails() {
      let i = 0;
      this.todos.forEach((todo) => {
        if (todo.done) i++;
      });
      return i;
    },
    changeAll() {
      // console.log(this.isAll);
      this.checkAll(!this.isAll);
    },
    clearAllTodo() {
      this.clearAll();
    },
  },
  computed: {
    isAll() {
      return this.doneDetails() === this.todos.length;
    },
  },
};
</script>

<style>
</style>