場(chǎng)景

鴻蒙開發(fā)-實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)與頁(yè)面返回：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118383025

在上面實(shí)現(xiàn)從主頁(yè)面跳轉(zhuǎn)到todolist頁(yè)面的基礎(chǔ)上

完整實(shí)現(xiàn)todolist的功能，即待辦事項(xiàng)。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費(fèi)下載。

實(shí)現(xiàn)

首先在hml中進(jìn)行頁(yè)面布局

<div class="container"><text class="title">待辦事項(xiàng)</text><button @click="goback">返回</button><div class="item" for="{{todoList}}"><text class="todo">{{$item.info}}</text><switch showtext="true" checked="{{$item.status}}"texton="完成" textoff="待辦"class="switch"@change="checkStatus($idx)"></switch><button class="remove" onclick="remove($idx)">刪除</button></div><div class="info"><text class="info-text">您還有</text><text class="info-num">{{needTodoNum}}</text><text class="info-text">件事情待辦，加油！</text></div><div class="add-todo"><input class="plan-input" type="text" onchange="getNewTodo"></input><button class="plan-btn" onclick="addTodo">添加待辦</button></div> </div>

注意這里的for循環(huán)的使用方式。

直接使用for="{{todoList}}進(jìn)行列表的遍歷，然后每一項(xiàng)的內(nèi)容通過{{$item.info}}

進(jìn)行顯示。這里的item是固定的，info和status是對(duì)象的屬性。

然后這里使用了switch開關(guān)組件。

其屬性為

名稱

類型

默認(rèn)值

必填

描述

checked	boolean	false	否	是否選中。
showtext	boolean	false	否	是否顯示文本。
texton	string	"On"	否	選中時(shí)顯示的文本。
textoff	string	"Off"	否	未選中時(shí)顯示的文本。

這里是否選中根據(jù)每個(gè)待辦事項(xiàng)對(duì)象的status屬性，這是個(gè)布爾類型的值。

然后change事件綁定的是當(dāng)改變時(shí)的操作，通過$idx將索引傳遞過去。

然后還有幾件代辦事項(xiàng)的數(shù)量通過計(jì)算屬性needTodoNum進(jìn)行顯示。

添加代表的點(diǎn)擊事件調(diào)用的是addTodo方法。

然后再css中先渲染其樣式。

.container {flex-direction: column;justify-content: flex-start;align-items: center;padding-bottom: 100px; } .title {font-size: 25px;margin-top: 20px;margin-bottom: 20px;color: #000000;opacity: 0.9;font-size: 28px; } .item{width: 325px;padding: 10px 0;flex-direction: row;align-items: center;justify-content: space-around;border-bottom: 1px solid #eee; } .todo{color: #000;width: 180px;font-size: 18px; } .switch{font-size: 12px;texton-color: green;textoff-color:red;text-padding: 5px;width: 100px;height: 24px;allow-scale: false; } .remove {font-size: 12px;margin-left: 10px;width: 50px;height: 22px;color: #fff;background-color: red; } .info{width: 100%;margin-top: 10px;justify-content: center; } .info-text {font-size: 18px;color: #AD7A1B; } .info-num{color: orangered;margin-left: 10px;margin-right: 10px; } .add-todo {position: fixed;left: 0;bottom: 0;width: 100%;height: 60px;flex-direction: row;justify-content: space-around;align-items: center;background-color: #ddd; }.plan-input {width: 240px;height: 40px;background-color: #fff; } .plan-btn {width: 90px;height: 35px;font-size: 15px; }

最后是在js中進(jìn)行上面一些事件方法的實(shí)現(xiàn)

import todoList from "../../common/datas/todoList.js" import router from '@system.router'; export default {data: {// 待辦事件列表todoList,inputTodo: "IDE無法調(diào)用輸入"},computed:{needTodoNum(){let num = 0;this.todoList.forEach(item => {if(!item.status){num++;}});return num;}},remove(index){console.log(index)this.todoList.splice(index,1)},addTodo() {this.todoList.push({info:this.inputTodo,status: false})},checkStatus(index){console.log(index);this.todoList[index].status = !this.todoList[index].status;},getNewTodo(e){this.inputTodo = e.value;},goback(){router.back();} }

首先是數(shù)據(jù)源是通過導(dǎo)入的方式賦值給todolist。

剩余待辦事項(xiàng)通過comouted計(jì)算屬性來計(jì)算，遍歷數(shù)據(jù)源todolist中狀態(tài)為

false的數(shù)量。并且將其賦值給needToNum,并在頁(yè)面上進(jìn)行顯示。

switch的change改變事件中，將其status反向。

??? checkStatus(index){console.log(index);this.todoList[index].status = !this.todoList[index].status;},

刪除待辦事項(xiàng)時(shí)通過傳遞的索引從list中刪除。

??? remove(index){console.log(index)this.todoList.splice(index,1)},

添加待辦事項(xiàng)，通過設(shè)置input的change事件

??? getNewTodo(e){this.inputTodo = e.value;},

將輸入的值賦值給變量inputTodo。

然后在新增按鈕的點(diǎn)擊事件中

??? addTodo() {this.todoList.push({info:this.inputTodo,status: false})},

往數(shù)據(jù)源中新增一個(gè)對(duì)象。

數(shù)據(jù)源是從common下datas下todoList中引入的

export default [{info: '關(guān)注公眾號(hào)',status: true},{info: '霸道的程序猿',status: false},{info: '學(xué)習(xí)編程知識(shí)',status: true},{info: '接受編程推送',status: false},{info: '努力學(xué)習(xí)',status: false} ]

注意在預(yù)覽模式下新增待辦事項(xiàng)時(shí)無法調(diào)起來鍵盤，所以需要在模擬器上運(yùn)行。

效果

總結(jié)

以上是生活随笔為你收集整理的鸿蒙开发-从搭建todolist待办事项来学习组件与js之间的交互的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。