梅克尔工作室——HarmonyOS实现列表待办

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
        }
    }
}

---

四、实现