vue04----仿作todoList

实现功能

• 在文本框输入后按enter添加待办事项
• 添加后显示在待办事项中
• 完成后勾选check框，从待办事项中移除，显示在已完成中
• 待办事项和已完成的计数功能
• 删除单条待办事项
• 按键clear清除所有事项

这些功能我已成功实现

我的代码：

script

<script>
// 用来编写逻辑
export default {
    // data函数
  data() {
    return {
      message: 'ToDoList',
      todoVal: '',
      todoList: []
    }
  },
  methods: {
    addTodo() {
      // 将todoVal添加到todoList中
      if (this.todoVal === '') {
        return;
      }
      this.todoList.unshift({
         // unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
        // 注意： 该方法将改变数组的数目。
        // 提示: 将新项添加到数组末尾，请使用 push() 方法。
        todoName: this.todoVal,
        done: false,
      });
      this.todoVal = '';
    },
    clear() {
      const res = window.confirm('真的要清理任务吗?');
      if (res) {
        this.todoList = [];
        this.todoVal = '';
      }
    },
    del(e) {
      const index = e.target.dataset.index;
      this.todoList.splice(index, 1);
    }
  }
}
</script>

template

<template>
  <!-- 用来编写模板/结构 -->
  <div class="todoBox">
    <div class="conBox">
      <div class="header">
        <h1>{{ message }}</h1>
        <input type="text" v-model.trim="todoVal" placeholder="添加todo" @keyup.enter="addTodo">
         <!-- trim除字符串两侧的空白字符或其他预定义字符 -->
        <button @click="clear">Clear</button>
      </div>

      <!-- 内容 -->
      <div class="body">
        <div>
          <div class="titleBox">
            <h2>待办事项</h2>
            <span class="static">{{ todoList.filter(item => !item.done).length }}</span>
          </div>
          <ul>
            <template v-for="(item, index) of todoList" :key="index">
              <li v-if="!item.done">
                <span class="greenBlock"></span>
                <input type="checkbox" v-model="item.done">
                <span>{{ item.todoName }}</span>
                <span class="rightSpan"><a :data-index="index" href="#" @click="del">-</a></span>
              </li>
            </template>
          </ul>
        </div>

        <div>
          <div class="titleBox">
            <h2>已完成</h2>
            <span class="static">{{ todoList.filter(item => item.done).length }}</span>
          </div>
          <ul>
            <template v-for="(item, index) of todoList.filter(item => item.done)" :key="index">
              <li v-if="item.done" :class="{ finishTodo: item.done }">
                <span class="greenBlock"></span>
                <input type="checkbox" v-model="item.done">
                <span>{{ item.todoName }}</span>
                <span class="rightSpan"><a :data-index="index" href="#" @click="del">-</a></span>
              </li>
            </template>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

style

<style>
/* 用来编写样式 */
div.todoBox {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

div.todoBox div.conBox {
  width: 50%;
  height: 500px;
}

div.todoBox div.conBox div.header {
  position: relative;
}

div.todoBox div.conBox div.header h1 {
  text-align: center;
  margin-bottom: 15px;
}

div.todoBox div.conBox div.header input {
  width: 80%;
  height: 30px;
  margin-left: 5px;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 14px;
}

div.todoBox div.conBox div.header button {
  width: 50px;
  height: 30px;
  border-radius: 8px;
  background-color: #55BB8E;
  color: white;
  font-weight: bold;
  border: 0;
  position: absolute;
  right: 5px;
}

div.todoBox div.conBox div.body {
  padding: 5px;
}

div.todoBox div.conBox div.body h2 {
  margin-bottom: 10px;
}


div.todoBox div.conBox div.body ul li {
  width: 100%;
  height: 35px;
  background-color: #fff;
  position: relative;
  list-style: none;
  margin-bottom: 10px;
  line-height: 35px;
  font-size: 16px;
  display: flex;
  align-items: center;
}

div.todoBox div.conBox div.body ul li span.greenBlock {
  display: inline-block;
  height: 100%;
  width: 10px;
  background-color: #55BB8E;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

div.todoBox div.conBox div.body ul li input {
  width: 25px;
  height: 25px;
  margin-left: 5px;
  margin-right: 5px;
}

div.todoBox div.conBox div.body ul li span.rightSpan {
  font-size: 20px;
  width: 30px;
  height: 25px;
  border-radius: 15px;
  border: 3px solid gray;
  box-sizing: border-box;
  position: absolute;
  top: 3px;
  right: 10px;
}

div.todoBox div.conBox div.body ul li a {
  width: 22px;
  display: inline-block;
  height: 18px;
  border-radius: 10px;
  background-color: gray;
  text-align: center;
  line-height: 20px;
  text-decoration: none;
  position: absolute;
  top: 1px;
  right: 2px;
}

.finishTodo {
  text-decoration: line-through;
  opacity: 0.5;
}

div.todoBox div.conBox div.body div.titleBox {
  position: relative;
}

div.todoBox div.conBox div.body div.titleBox span {
  display: inline-block;
  width: 25px;
  height: 25px;
  background-color: #55BB8E;
  border-radius: 50%;
  text-align: center;
  line-height: 25px;
  position: absolute;
  color: white;
  right: 13px;
  top: 5px;
}
</style>

我仿作的原帖为：vue-基础项目-todolist实现_Thecai-的博客-CSDN博客_vue todolist key复用vue-基础项目-todolist实现源代码地址：https://github.com/Lituzi/vue-miniProject-ToDoList实现功能在文本框输入后按enter添加待办事项添加后显示在待办事项中完成后勾选check框，从待办事项中移除，显示在已完成中待办事项和已完成的计数功能删除单条待办事项按键clear清除所有事项保存在本地localStorage中vue实现创建vue-cli脚手架项目步骤npm install --global vue-clihttps://blog.csdn.net/qq_33094147/article/details/115386252