IMWeb訓練營作業 todolist

2021-07-30 20:11:01 字數 923 閱讀 8463

先來幾張。

預設的外觀:

新增幾個待辦適宜後的外觀:

編輯待辦適宜後的外觀:

標記為已完成後的外觀:

篩選未完成的外觀:

刪除1個待辦適宜後的外觀:

實現思路:

用乙個陣列儲存所有待辦適宜。每個待辦適宜的格式是如下

我用新建待辦適宜時的時間戳做那條待辦適宜的id

對待辦適宜的增刪改查就是對陣列的增刪改查。下面是部分**

新增

create: function

() )

} this.newtodo = ''

}

修改

update: function

(todo)

this.editingtodo = null

todo.title = todo.title.trim()

if (!todo.title)

}

刪除

remove: function

(id) )

}

檢視所有已完成的

completed: function

(todos) )

}

前端路由用的 director。當然,用 vue-router 也是可以的。

為了下次進來還能看到以前編輯的待辦適宜。把資料存在了 localstorage。

watch: 

}

所有原始碼見這裡。

IMWeb訓練營作業 Todolist

v for指令 根據一組陣列的選項列表進行渲染 語法 value,key in items value,key of items 變異方法 vue提供一組方法,對陣列進行操作時候,會觸發檢視更新 push pop shift unshift splice sort reverse 事件處理器 v o...

IMWeb訓練營作業 Todo

vuejs 學習 todo 時間問題,作業僅支援移動端 作業使用vue cli搭建開發環境,修改了部分webpack配置,採用模組化開發形式,部分內容加入了動畫效果,支援雙擊todo進行編輯,支援hash監聽,沒有設計師,視覺呈現請dalao多見諒 雙擊間隔最大時間 const double tou...

IMWeb訓練營作業 todo list

通過這兩天對todo list例項的學習與實踐,對vue有了進一步的了解和認識。html html html head lang en meta charset utf 8 link rel stylesheet href index.css title todo list title script...