<template>
<view>
<uni-card title="请输入待办事项">
<uni-easyinput v-model="value" placeholder="请输入待办事项"></uni-easyinput>
<button type="primary" @click="addItem">添加事项</button>
</uni-card>
<uni-card title="待办事项">
<view v-for="(item,index) in todolist" :key="index" class="todo_item">
<view class="">{{item}}</view>
<uni-icons type="redo" size="26" style="color: aqua;" @click="redo(index)"></uni-icons>
<uni-icons type="clear" size="26" style="color: aqua;" @click="clear(index,'todo')"></uni-icons>
</view>
</uni-card>
<uni-card title="已办事项">
<view v-for="(item,index) in donelist" :key="index" class="done_item">
<view class="">{{item}}</view>
<uni-icons type="clear" size="26" style="color: aqua;" @click="clear(index,'done')"></uni-icons>
</view>
</uni-card>
</view>
</template>
<script>
export default {
data() {
return {
value:'',
todolist:['吃饭','睡觉','打豆豆'],
donelist:['打球','考试','上课'],
}
},
methods: {
addItem(){
if(!this.value){
uni.showToast({
title:'事项输入不能为空',
icon:'error'
})
return
}
this.todolist.push(this.value)
},
redo(index){
// 先添加已办数组中的数据
var data = this.todolist[index]
this.donelist.push(data)
// 再删除待办事项数组中的数据
this.todolist.splice(index,1)
},
clear(index,name){
if(name=='todo'){
this.todolist.splice(index,1)
}else{
this.donelist.splice(index,1)
}
}
}
}
</script>
<style>
.todo_item, .done_item{
display: flex;
border-bottom: 1px solid #ccc;
padding: 10px;
margin: 10px;
}
.todo_item view{
flex: 1;
}
.done_item{
flex: 1;
}
</style>