uniapp做待办事项卡片，实现增删，完成的标记，持久化存储

在UniApp中制作待办事项卡片，你可以按以下步骤进行：

1. **设计卡片视图**：
- 使用`<cell>`组件创建卡片，包含标题(`title`)、进度条(`progress`)和一个开关(`switch`)表示是否已完成。

   <view class="todo-item">
     <cell :title="item.title" :progress="item.progress" @tap="handleItemTap(item)">
       <switch v-model="item.completed" @change="updateCompleted(item)"></switch>
     </cell>
   </view>

2. **数据管理**：
创建一个数组来储存待办事项，每个对象包含`title`、`completed`属性。

   data() {
     return {
       todos: [],
     };
   }

3. **增删功能**：
- 新建任务：通过表单收集用户输入，然后添加新对象到`todos`数组。
- 删除任务：提供删除按钮，通过索引从数组中移除对应项。

4. **完成标记**：
- 当用户点击开关时，改变`completed`值，并更新对应的进度条。

   updateCompleted(item) {
     item.completed = !item.completed;
     // 更新进度条，例如0-100%
   }

5. **持久化存储**：
使用uni-app的本地存储API来保存和读取`todos`。当数据变化时，使用`uni.setStorageSync('todos', todos)`保存，加载时用`todos = uni.getStorageSync('todos') || []`.

onLoad() {
  this.todos = uni.getStorageSync('todos') || [];
},
saveTodos() {
  uni.setStorageSync('todos', this.todos);
}

每次修改完待办事项后，记得调用`saveTodos()`方法。