用vue3做一个todoList

一、具体功能

1.用户输入新增的事项点击回车或者添加，事项列表中显示当前添加的事项。

2.事项分为，所有事项、未办事项、已完成事项。新增的事项默认为未办事项。

3.事项的状态：已完成和未办可相互转换。

4.事项可删除。

二、实现的效果

1.修改任务状态

2.删除任务

三、具体实现

给input框绑定一个enter事件，同时给button按钮绑定一个点击事件

<el-input v-model="inputValue" @keyup.enter="addList" placeholder="请输入"/>
<el-button type="primary" @click="addList">添加</el-button>

// 在setup函数中定义变量,实现新增事项功能。
 const state = reactive({
      todoList: [{ name: "我", checked: false, isDelete: false }], // 所有列表
      list1: [], //未办事项列表
      list2: [], //已办事项列表
      inputValue: "", //输入框的值
    });

//新增事项
const addList = () => {
    if (state.inputValue) {
        state.todoList.push({
            name: state.inputValue,
            checked: false,
            isDelete: false,
        });
        state.inputValue = null;
        changeListDelete();
    }
};

功能实现说明

---

实现事项的状态相互转换以及事项的删除操作。 按照一般操作，实现事项删除肯定会想到用splice()，然后拿到index对todoList数组删除。但这样如果在已办事项中选中某条事项拿到的index有可能会和todoList数组中的那一条对不上。 所以这里采用的是vue的响应式原理，改变当前事项的状态，todoList中的事项也会随之改变。

template代码如下

 <el-tabs @tab-change="tabChange">
      <el-tab-pane label="全部">
        <el-card class="box-card" shadow="always">
          <template #header>
            <div class="card-header">
              <span>所有任务</span>
            </div>
          </template>

          <div v-for="(item, i) in todoList" :key="i" class="list">
            <div class="text">
              <div>
                <span>{{ item.name }}</span>
              </div>
              <div>
                <el-button type="text" @click="changeStatus(item)"
                  >{{ item.checked ? "取消" : "完成" }}
                </el-button>
                <el-button type="text" @click="deleteList(item)"
                  >删除
                </el-button>
              </div>
            </div>
            <el-divider />
          </div>
        </el-card>
      </el-tab-pane>

      <el-tab-pane label="未完成的任务">
        <el-card class="box-card" shadow="always">
          <template #header>
            <div class="card-header">
              <span>未办理的任务</span>
            </div>
          </template>

          <div v-for="(item, i) in list1" :key="i" class="list">
            <div class="text">
              <div>
                <span>{{ item.name }}</span>
              </div>

              <div>
                <el-button type="text" @click="changeStatus(item)"
                  >完成
                </el-button>

                <el-button type="text" @click="deleteList(item)"
                  >删除
                </el-button>
              </div>
            </div>
            <el-divider />
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="已完成的任务">
        <el-card class="box-card" shadow="always">
          <template #header>
            <div class="card-header">
              <span>已完成的任务</span>
            </div>
          </template>
          <div v-for="(item, i) in list2" :key="i" class="list">
            <div class="text">
              <div>
                <span>{{ item.name }}</span>
              </div>

              <div>
                <el-button type="text" @click="changeStatus(item)"
                  >取消
                </el-button>

                <el-button type="text" @click="deleteList(item)"
                  >删除
                </el-button>
              </div>
            </div>
            <el-divider />
          </div>
        </el-card>
      </el-tab-pane>
    </el-tabs>

setup()代码如下

//删除事项
    const deleteList = (item) => {
    item.isDelete = !item.isDelete;
    changeListDelete();
};
const changeListDelete = () => {
    state.list1 = state.todoList.filter(key => !key.checked && !key.isDelete);
    state.list2 = state.todoList.filter(key => key.checked && !key.isDelete);
    state.todoList = state.todoList.filter((key) => !key.isDelete);
};

// 已办事项和代办事项的相互转换
const changeStatus = (item) => {
    item.checked = !item.checked;
    state.list1 = state.todoList.filter(key => !key.checked);
    state.list2 = state.todoList.filter(key => key.checked);
};
const tabChange = (e) => {
    changeListDelete();
};
return {
    changeStatus,
    deleteList,
    addList,
    tabChange,
    ...toRefs(state),
};