執行效果圖:
核心**:
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...