（Vue案例）TodoList

实现效果

 代码展示

main.js

//引入vue
import Vue from "vue";
//引入组件App
import App from "./App.vue";

//关闭vue的生产提示
Vue.config.productionTip = false;

//创建vm
new Vue({
  el: "#app",
  render: (h) => h(App),
});

App.vue

<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <todo-head :addTodo="addTodo" />
        <todo-list
          :todoList="todoList"
          :deleteTodo="deleteTodo"
          :updateFlag="updateFlag"
        />
        <todo-fotter
          :todoList="todoList"
          :updateFlagAll="updateFlagAll"
          :deleteFlagAll="deleteFlagAll"
        />
      </div>
    </div>
  </div>
</template>

<script>
import TodoList from "./components/todo-list.vue";
import TodoHead from "./components/todo-head.vue";
import TodoFotter from "./components/todo-fotter.vue";
//引入组件

export default {
  components: { TodoHead, TodoList, TodoFotter },
  name: "App",
  data() {
    return {
      todoList: [
        { id: "001", name: "yb", flag: true },
        { id: "002", name: "yg", flag: false },
        { id: "003", name: "yf", flag: true },
      ],
    };
  },
  methods: {
    //添加
    addTodo(todo) {
      this.todoList.unshift(todo); //在数组最前方添加
    },
    //删除
    deleteTodo(id) {
      //过滤出 不是要删除id的 所有值
      this.todoList = this.todoList.filter((todo) => todo.id != id);
    },
    //删除全部已选的
    deleteFlagAll() {
      this.todoList = this.todoList.filter((todo) => todo.flag === false);
    },
    //修改指定事 是否完成
    updateFlag(id) {
      this.todoList.forEach((todo) => {
        if (todo.id === id) todo.flag = !todo.flag;
      });
    },
    //修改全部的 是否完成
    updateFlagAll(flag) {
      this.todoList.forEach((todo) => {
        todo.flag = flag;
      });
    },
    //删除指定的
  },
};
</script>

<style>
/*base*/
body {
  background: plum;
}
.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>

components里的 todo-head.vue

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

<script scoped>
//引入nanoid
import { nanoid } from "nanoid";
export default {
  props: ["addTodo"],
  data() {
    return {
      todoName: "",
    };
  },
  methods: {
    add() {
      //去除前后空格判断不为空 进行添加
      if (this.todoName.trim() != "" && this.todoName.trim() != null) {
        const todo = { id: nanoid(), name: this.todoName, flag: false };
        this.addTodo(todo);
        this.todoName = "";
      }
    },
  },
};
</script>

<style>
/*header*/
.todo-header input {
  width: 560px;
  height: 28px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 7px;
}

.todo-header input:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(82, 168, 236, 0.6);
}
</style>

components里的todo-list.vue