iT邦幫忙

2023 iThome 鐵人賽

DAY 8
0
Vue.js

從入門到入土一條龍Vue.js系列 第 8

從入門到入土一條龍Vue.js Day08- To Do List(實做)

  • 分享至 

  • xImage
  •  

template

輸入和添加

https://ithelp.ithome.com.tw/upload/images/20230908/20162353xAmHGUCc3s.png
v-model綁定input的數據,裡面的字顯示新增待辦,也加上enter和按鈕觸發事件

待辦列表

https://ithelp.ithome.com.tw/upload/images/20230908/20162353GYS6zWn52u.png
v-for渲染我們的filteredTodos而且綁定key是todo的id
左到右是checkbox , span 和 remove按鈕 ,裡面的技術都是前面教過的

篩選toDo

https://ithelp.ithome.com.tw/upload/images/20230908/20162353grZ9tdI4I1.png
filter的數值改變,就會觸發computed,computed就會回傳filteredTodos,在根據filteredTodos內容用v-for渲染

script

data

https://ithelp.ithome.com.tw/upload/images/20230908/201623533ypzY91IYV.png
三個數據分別是 待辦事項,列表和篩選值

methods

https://ithelp.ithome.com.tw/upload/images/20230908/20162353HSUKOorjzg.png
添加事件時候用當前時間當作唯一id, 文本和狀態
移除就根據id去移除

computed

https://ithelp.ithome.com.tw/upload/images/20230908/20162353fPy6dxCzh5.png
選擇按鈕改變filter的value觸發這邊回傳資料的不同

style

https://ithelp.ithome.com.tw/upload/images/20230908/20162353s0teizSaYj.png
最好自己設計,這只是參考


上一篇
從入門到入土一條龍Vue.js Day07- To Do List(構思)
下一篇
從入門到入土一條龍Vue.js Day09- Vue Router 的使用
系列文
從入門到入土一條龍Vue.js12
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言