先來幾張。
預設的外觀:
新增幾個待辦適宜後的外觀:
編輯待辦適宜後的外觀:
標記為已完成後的外觀:
篩選未完成的外觀:
刪除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...