需要實現介面截圖:
難點分析:sallcheck必須定義為計算屬性
1.想到問題:
一旦寫乙個元件,需要接收哪些屬性??
因為只有屬性確定了,標籤才好寫
todos屬性可以確定三個方面的顯示
2.做互動("刪除已完成任務":接收乙個函式)
傳:todos和兩個函式
4.在methods中定義兩個函式
//刪除全部已完成任務,要不要引數?怎樣判斷?//判斷做這個事情有沒有條件,假如我不傳引數,能不能搞定
//說白了 ,
//從中找出為true的乾掉
//所以需要用到過濾,留下false
deleteccompletetodos(),
//全選/全不選,要把所有的complete值要改成true/false
//你要告訴我是全選還是全不選
//遍歷專案中所有的todos,需要更改complete的狀態
selectalltodos(check)
},5.input 輸入框,v-model="isallcheck"
故isallcheck必須定義為計算屬性,而且必須有get,set方法
get確定我當前是true還是false,看completesize=?todos.length,完成數量等於總數量就應該全選
點一下勾選,接收乙個value,接收的value為boolean值
6.7.啟動專案,專案報錯:
解決方法,todofooter.vue中第27行todos未定義,故加上this.
成功截圖
出現新問題,當全部刪除後,還會勾選:
為什麼會勾選?
this.completesize===this.todos.length,這個是勾選條件解決方法:說明條件不夠,需要新增條件