Vue+element實(shí)現(xiàn)todo(五)

(一)計算屬性
我們想要在頁面下方統(tǒng)計全部數(shù)量,未完成數(shù)量以及已完成的數(shù)量,就要用到計算屬性complted,這個屬性的存在是因?yàn)樵谀0逯蟹湃胩嗟倪壿嫊屇0暹^重且難以維護(hù),
So...
返回全部數(shù)量很簡單,直接獲取list的長度就好了,

image.png

接下來是獲取完成數(shù)量的長度,利用了filter,filter這個函數(shù)就是要根據(jù)某個檢測函數(shù)去列表中篩選出符合檢測要求的結(jié)果,因?yàn)橐Y選done=true的長度(不要吐槽我的參數(shù)名....),所以我們就把未完成的 todo 篩選出來了
image.png

接著獲取未完成的長度,
image.png

這里用到了箭頭函數(shù),等價于

function(sa){
    return sa.done
}

關(guān)于箭頭函數(shù)??梢钥聪铝窝┓謇蠋煹闹v解https://www.liaoxuefeng.com/wiki/1022910821149312/1031549578462080

(二)清空已完成
依舊用到了element的button組件,綁定一個函數(shù)

image.png

然后實(shí)現(xiàn)相應(yīng)綁定方法,
image.png

Bingo~~~~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容