用vue3做一个todoList
1.用户输入新增的事项点击回车或者添加,事项列表中显示当前添加的事项。2.事项分为,所有事项、未办事项、已完成事项。新增的事项默认为未办事项。3.事项的状态:已完成和未办可相互转换。4.事项可删除。...
·
一、具体功能
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),
};
更多推荐
已为社区贡献2条内容
所有评论(0)