IMWeb訓練營作業 todolist

2021-07-30 21:12:24 字數 1399 閱讀 8767

執行效果圖:

核心**:

index.html

任務計畫列表

新增任務:

所有任務

未完成的任務

完成的任務

任務列表:

還沒有新增任何任務

var store = ,

fetch (k)

};var list = store.fetch('backlog');

// var list = [,];

var filter = ,

'unfinished': (list) => )

},'finished': (list) => )}};

var vm = new vue(,

computed: ).length;

},filterlist: function() else }},

watch: ,

deep: true}},

directives:}}

},methods: );

this.todo = '';

},edittodo (todo) ,

cancledit (todo) ,

editdone (todo) ,

deltask (todo)

}});

function watchhashchange()

watchhashchange();

window.addeventlistener('hashchange', watchhashchange);

style.css

body

.container

.title

.main-title

.panel

.tips

.list-title

.tab

.tab > a

.tab > .active

.input-task, .edit

ul li

.edit

.btn-check, .btn-del

.view > .btn-check

.view > .btn-del

.list .view > .btn-del:hover

.view

.view:hover

.view > .item

.view > .completed

li.editing > .view

li.editing > input

vue的向下相容很不錯,直接可以在html中實現,而不用搭建web伺服器,這方面比react要好用。

IMWeb訓練營作業 todolist

先來幾張。預設的外觀 新增幾個待辦適宜後的外觀 編輯待辦適宜後的外觀 標記為已完成後的外觀 篩選未完成的外觀 刪除1個待辦適宜後的外觀 實現思路 用乙個陣列儲存所有待辦適宜。每個待辦適宜的格式是如下 我用新建待辦適宜時的時間戳做那條待辦適宜的id。對待辦適宜的增刪改查就是對陣列的增刪改查。下面是部分...

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...