Merkel Studio - harmonyos implementation list to do

HarmonyOS Implement the list to do

One 、 Data profile

In the picture datas Put under the path todolist.js The configuration file

---

Two 、HML file

stay HML In file , Use for Label from todoList Read data circularly in data

The main use of switch Component implementation to do

<switch showtext="true" checked="{
     {$item.status}}" texton=" complete " textoff=" To do " class="switch" @change="switchChange($idx)"></switch>

Delete button

[ Failed to transfer the external chain picture , The origin station may have anti-theft chain mechanism , It is suggested to save the pictures and upload them directly (img-m3OxcC2D-1658935411024)(…/…/…/AppData/Roaming/Typora/typora-user-images/image-20220727230742413.png)]

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

Complete code ：

<div class="container">
    <text class="title"> Clock in today </text>
    <div class="item" for="{
     {todoList}}">
        <text class="todo">{
   {$item.info}}</text>
        <switch showtext="true" checked="{
     {$item.status}}" texton=" complete " textoff=" To do " class="switch" @change="switchChange($idx)"></switch>
        <button class="remove" @click="remove($idx)"> Delete </button>
    </div>
    <div class="info">
        <text class="info-text"> You have </text>
        <text class="info-num">{
   {todoCount}}</text>
        <text class="info-text"> Things to do , come on. ！</text>
    </div>
    <div class="add-todo">
        <input class="plan-input" type="text"></input>
        <button class="plan-btn" onclick="addTodo" @click="addTodo"> Add to do </button>
    </div>
</div>

---

3、 ... and 、JS file

Be careful ： Need from datas Import data profile in

And because the preview function does not support monitoring keyboard input , Just write the data to be added dead

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 The tool cannot listen for keyboard input ',
            status: false
        })
    },
    computed:{
    
        todoCount(){
    
            let num=0;
            this.todoList.forEach(element => {
    
                if(!element.status){
    
                    num++
                }
            });
            return num
        }
    }
}

---

Four 、 Realization