HarmonyOS实现列表待办

一、数据配置文件

在如图datas路径下放入todolist.js配置文件

二、HML文件

在HML文件中，使用for标签从todoList数据中循环读取数据

主要使用switch组件实现待办完成

<switch showtext="true" checked="{{$item.status}}"  texton="完成" textoff="待办"  class="switch"  @change="switchChange($idx)"></switch>

删除按钮

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m3OxcC2D-1658935411024)(…/…/…/AppData/Roaming/Typora/typora-user-images/image-20220727230742413.png)]

 <button class="remove" @click="remove($idx)">删除</button>

完整代码：

<div class="container">    <text class="title">今日打卡</text>    <div class="item" for="{{todoList}}"> <text class="todo">{{$item.info}}</text> <switch showtext="true" checked="{{$item.status}}"  texton="完成" textoff="待办"  class="switch"  @change="switchChange($idx)"></switch> <button class="remove" @click="remove($idx)">删除</button>    </div>    <div class="info"> <text class="info-text">您还有</text> <text class="info-num">{{todoCount}}</text> <text class="info-text">件事情待办，加油！</text>    </div>    <div class="add-todo"> <input class="plan-input" type="text"></input> <button class="plan-btn" onclick="addTodo" @click="addTodo">添加待办</button>    </div></div>

三、JS文件

注意：需要从datas中导入数据配置文件

并且由于预览功能不支持监听键盘输入，就把添加待办的数据写死了

import todoList from "../../common/datas/todoList.js"export default {    data: { todoList    },    remove(index){ console.log(index) this.todoList.splice(index,1)    },    addTodo(){ this.todoList.push({     info: 'IDE工具无法监听键盘输入',     status: false })    },    computed:{ todoCount(){     let num=0;     this.todoList.forEach(element => {  if(!element.status){      num++  }     });     return num }    }}

四、实现